Fortunately, there are some clever techniques for reducing concurrent animation load.Solution
There are two approaches for addressing the concurrency issue: staggering and breaking
up animations into sequences.
Stagger
One way to reduce concurrent animation load is to make use of Velocity’s UI pack’s
stagger feature, which delays the start times of successive animations in a set of
elements by a specified duration. For example, to animate every element in a set toward an
opacity value of 1 with successive 300ms delays between start times, your code might
look like this:
Click here to view code image
$elements.velocity({ opacity: 1 }, { stagger: 300 });
The elements are no longer animating in perfect synchronization; instead, at the very
start of the entire animation sequence, only the first element is animating. Later, at the
very end of the entire sequence, only the last element is animating. You’re effectively
spreading out the animation sequence’s total workload so that the browser is always
performing less work at one time than it would have had it been animating every element
simultaneously. What’s more, implementing staggering into your motion design is often a
good aesthetic choice. (Chapter 3, “Motion Design Theory,” further explores the merits of
staggering.)
Multi-animation sequences
There’s one more clever way to reduce concurrent load: break up property animations into
multi-animation sequences. Take, for example, the case of animating an element’s opacity
value. This is typically a relatively low-stress operation. But, if you were to
simultaneously animate the element’s width and box-shadow properties, you’d be
giving the browser appreciably more work to perform: more pixels will be affected, and
more computation would be required.
Hence, an animation that looks like this:Click here to view code image
$images.velocity({ opacity: 1, boxShadowBlur: “50px” });
might be refactored into this:
Click here to view code image
$images
.velocity({ opacity: 1 })
.velocity({ boxShadowBlur: “50px” });
The browser has less concurrent work to do since these individual property animations
occur one after another. Note that the creative tradeoff being made here is that we’ve opted
to prolong the total animation sequence duration, which may or may not be desirable for
your particular use case.