Animation Groups

Reported by:	matthewmatician@gmail.com	Owned by:
Priority:	undecided	Milestone:
Component:	effects	Version:	1.4.4
Keywords:	needsreview	Cc:
Blocked by:		Blocking:

Description

A best-practice in using javascript to animate transitions is to remember to "Stop" other animations in progress that would cause undesirable outcomes (e.g., if a user hovers their mouse quickly over many buttons, back & forth, we sometimes see these buttons flash on & off repeatedly). One way to automate this is to categorize elements into groups, and define characteristics to the group. For example, we could define a group as "onlyOneActive", meaning that all other animations in progress must stop and go back to their inactive state. Another example would be to define a group as "skipToState", meaning that all other animations must skip ahead to the state to wich they are currently transitioning.

Attachments (0)

Change History (6)

Changed December 10, 2010 07:39PM UTC by jitter comment:1

description:	A best-practice in using javascript to animate transitions, etc, is to remember to "Stop" animations in progress that would cause undesirable outcomes (e.g., if a user hovers their mouse quickly over many buttons, back & forth, we sometimes see these buttons flash on & off). One way to automate this is to categorize elements into groups, and define characteristics to the group. For example, we could define a group as "onlyOneActive", meaning that all other animations in progress must stop and go back to their inactive state. Another example would be to define a group as "skipToState", meaning that all other animations must skip ahead to the state they are transitioning to. → A best-practice in using javascript to animate transitions is to remember to "Stop" other animations in progress that would cause undesirable outcomes (e.g., if a user hovers their mouse quickly over many buttons, back & forth, we sometimes see these buttons flash on & off repeatedly). One way to automate this is to categorize elements into groups, and define characteristics to the group. For example, we could define a group as "onlyOneActive", meaning that all other animations in progress must stop and go back to their inactive state. Another example would be to define a group as "skipToState", meaning that all other animations must skip ahead to the state to wich they are currently transitioning.

description:

A best-practice in using javascript to animate transitions, etc, is to remember to "Stop" animations in progress that would cause undesirable outcomes (e.g., if a user hovers their mouse quickly over many buttons, back & forth, we sometimes see these buttons flash on & off). One way to automate this is to categorize elements into groups, and define characteristics to the group. For example, we could define a group as "onlyOneActive", meaning that all other animations in progress must stop and go back to their inactive state. Another example would be to define a group as "skipToState", meaning that all other animations must skip ahead to the state they are transitioning to. → A best-practice in using javascript to animate transitions is to remember to "Stop" other animations in progress that would cause undesirable outcomes (e.g., if a user hovers their mouse quickly over many buttons, back & forth, we sometimes see these buttons flash on & off repeatedly). One way to automate this is to categorize elements into groups, and define characteristics to the group. For example, we could define a group as "onlyOneActive", meaning that all other animations in progress must stop and go back to their inactive state. Another example would be to define a group as "skipToState", meaning that all other animations must skip ahead to the state to wich they are currently transitioning.

Updated description and removed superseded comments

Changed December 23, 2010 06:26PM UTC by dmethvin comment:2

component:	unfiled → effects
keywords:	→ needsreview

Changed February 11, 2011 05:01AM UTC by muley comment:3

I made an animation groups plugin some time ago as a proof of concept... it's a rough draft, but may be of use:

http://adam.cirkuit.net/animationGroups

Changed February 24, 2011 11:07AM UTC by lrbabe comment:4

Can't you just use jQuery.fn.stop to that purpose?

http://api.jquery.com/stop

I think this tutorial will help you to achieve what you are describing.

http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup

Changed February 24, 2011 02:48PM UTC by matthewmatician@gmail.com comment:5

Replying to [comment:6 lrbabe]:

Can't you just use jQuery.fn.stop to that purpose? http://api.jquery.com/stop I think this tutorial will help you to achieve what you are describing. http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup

I'm actually suggesting a more streamlined approach than the "stop" function. Often in an interface you need to call several "stops" to different elements before proceeding. It's often not a big deal to manage 5 or 6 cooperative elements, but if you need to manage any more than this, your code becomes lengthy and repetitive.

Changed April 16, 2011 11:55PM UTC by john comment:6

milestone:	1.6
resolution:	→ plugin
status:	new → closed

This definitely seems like something that should be proved as a plugin first before we start to implement this in core.

Side navigation

#7747 closed feature (plugin)