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

$element.velocity({ translateX: “500px” });

Similarly,  if  you can substitute  translateY  for top,    do  so:

Click here to view code image
$element.velocity({ top: “100px” });
// Faster: Use translateY
$element.velocity({ translateY: “100px” });

    Note

Sometimes   you actually    intend  to  use left    or  top so  that    neighboring

elements’   positions   are changed.    In  all other   cases,  get into    the habit   of  using

the transform   properties. The performance impact  is  significant.

Consider    Opacity Over    Color

opacity is  another CSS property    that    receives    a   GPU rendering   boost   since   it

doesn’t affect  the positioning of  elements.   So, if  there   are elements    on  your    page    for

which   you’re  currently   animating,  say,    color   when    the user    hovers  over    them,

consider    animating   opacity instead.    If  the net effect  looks   almost  as  good    as  the

color   animation,  then    consider    sticking    with    it—you’ve   just    boosted the UI’s

performance without compromising    its look.

As a performance-minded developer, you’re no longer allowed to arbitrarily select
animation properties. You must now consider the impact of each of your property choices.

    Note

Refer   to  CSSTriggers.com for a   breakdown   of  how CSS properties  affect

browser performance.

Technique: Reduce concurrent load

Browsers have bottlenecks. Find out what they are and stay below them.

Problem

When a page first loads, the browser processes HTML, CSS, JavaScript, and images as
quickly as possible. It should come as no surprise that animations occurring during this
time tend to be laggy—they’re fighting for the browser’s limited resources. So, despite the
fact that a page’s loading sequence is often a great time to flaunt all your motion design
skills, it’s best to restrain yourself if you want to avoid giving users the first impression
that your site is laggy.

A similar concurrency bottleneck arises when many animations occur at once on a page
—regardless of where they take place in the page’s lifecycle. In these situations, browsers
can choke under the stress of processing many styling changes at once, and stuttering can
occur.