To start creating animation on the web that should run on 60 frames per second, we should first learn about how animation works in a browser:

Animation trigger, usually JavaScript or CSS animation.
Style calculations, Style calculations are part of the process where your CSS gets applied to your HTML structure. The browser needs to calculate all the styles applied to your DOM.
Layout, after style calculations the browser knows which rules to apply to certain elements. During the layout phase the browser will calculate the positioning and space occupation of the elements.
Paint, during the Paint pixels will be filled in. This process involves drawing every visual part of the DOM. Things like: text, images, colors, etc.
Compositing, during the Compositing stage, your browser will calculate on what layer your elements should be drawn.

If you animate an elements geometry like its width, height or positioning your browser has to recalculate stylesRedo the layoutPaint all the pixelsComposite layers. That would be quite an extensive task.

If you for example animate an elements color, background-image or shadows your browser will skip layout and would just recalculate stylesPaint all the pixelsComposite layers because the layout of your DOM stays intact.

If you animate your elements with properties that won’t affect layout OR paint your browser would just recalculate stylesComposite layers. This is the most performant way of animating elements in your browser. These properties would usually be transform and opacity.

Animation with CSS

Transitions can be done like this:

  a {
transition: transform 150ms ease-out;
}
a:hover {
transform: scale(1.05);
}

A general tip would be to not put the transition on the :hover itself, because that may cause your transition to only go one-way.

Keyframe objects may look like this:

  @keyframes Animation {
    0% {
        transform: translateY(-10%);
    }
    100% {
        transform: translateY(0%);
    }
}

Animation with Javascript

Animation can be done in a LOT of different ways. You could for example just animate an element with element.style = “transform: translate3d(50%, 0, 0)” and if the element has a transition-property: transform and a transition-duration it will animate.

Another way would be to use window.requestAnimationFrame.

The window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint. The method takes a callback as an argument to be invoked before the repaint. The number of callbacks is usually 60 times per second, but will generally match the display refresh rate in most web browsers as per W3C recommendation. -

-MDN

The function window.requestAnimationFrame helps a LOT when striving for high performing animations. It will make sure your animation will run as smoothly as possible. Animation with CSS CSS animation can be done with transition and @keyframe objects. I use window.requestAnimationFrame mostly when I use the <canvas> element. <canvas> is a huge feature on itself so I will not cover that in this post.

A newer and not yet fully supported method for animation is the Web Animations API which lets you create keyframe like objects in JavaScript inside of the animate function.

  elementNode.animate(
[
  { transform: 'translate3d(0, 0, 0)' },
  { transform: 'translate3d(50%, 0, 0)' }   
], {
  fill: 'forwards',
  easing: 'ease-out',
  duration: 3000
});

That’s it. No requestAnimationFrame No hassle.

Read more about the Web Animations API here:

WAAPI on MDN

Check out the micro-library I wrote to componentize the Web Animations API with JSON:

MagicLib on GitHub

Learn more about animating with JavaScript Libraries like GreenSock here:

My CodePen blog posts


102 0 0