Web Animation using JavaScript: Develop & Design (Develop and Design)

Consider the following two animation examples, both of which are triggered upon page
load:

Click here to view code image
// Animate translateX to 500px from a start value of 0
$element.velocity({ translateX: [ 500, 0 ] });
// Animate opacity to 0 from a start value of 1
$element.velocity({ opacity: [ 0, 1 ]);
In the first example, you’re passing translateX a force-fed start value of 0 since you
know that the element has yet to be translated (since the page has just loaded). You’re
force-feeding in what you know (or want) the original property value to be. Further, in the
second example, the element’s current opacity is 1 because that’s the default value for
opacity and you haven’t yet modified the element in any way. In short, with force-
feeding, you can reduce the browser’s workload in situations where you have an
understanding of how elements are already styled.

    Note

Force-feed  animation   properties  only    when    they’re first   used    in  an  animation

chain,  not when    they    occur   subsequently    in  the chain,  since   Velocity    already

does    internal    caching there:

Click   here    to  view    code    image

$element

            //  Optionally  forcefeed   here

            .velocity({ translateX:[    500,    0   ]   })

            //  Do  not forcefeed   here;500    is  internally  cached

            .velocity({ translateX:1000 });

Force-feeding is an invaluable feature for high-stress situations such as animating a
large number of elements at once on a desktop browser or when dealing with low-powered
mobile devices for which every page interaction incurs a noticeable delay.

However, for most real-world UI animation situations, force-feeding is an unnecessary
optimization that makes your code less maintainable due to having to update the force-fed
start values whenever you change the elements’ values within CSS stylesheets.

    Note

Refer   to  Chapter 8,  “Animation  Demo,”  to  walk    through an  application of

force-feeding.

Technique: Batch DOM additions

Like reducing layout thrashing, batching DOM additions is another performance technique
to help avoid unoptimized interaction with the browser.