September 19, 2018

CSS Transitions & Animations

1 hour 24 minutes

In this episode we focus on CSS transitions and animations, what they are, why they both exist, and when you should use one or the other.

Segment 1 - Transitions vs Animations

AdobePress Article - reference link

Transitions

Only have two states (triggered and not triggered)

Always run forward when triggered, and backwards when the trigger is removed

Common triggers are: hover, link, active, visited, focus, checked, disabled

Common use case: hover over a button and have the box shadow get darker as long as the cursor is hovering over it

Animations

More control than transitions

Can start, stop, pause, run forwards, run backwards

Complex animations are possible by manipulating various properties within keyframes

May be more difficult to manipulate with Javascript

Use animations if you need the complexity

Use transitions if you have a simple affect that only needs two states (triggered, not triggered)

Segment 2 - How Transitions and Animations Improve UX

Build your site with animations in mind so they don't look tacked on after the fact

Don't be too flashy - your animations need to have purpose, shouldn't get in the way of the user experience

Don't overwhelm the user with animations - may cause performance issues, can distract the user

Keep animations consistent with the associated action - swipes with sliding animation, taps w/ pebble drop in water animation

Segment 3 - Performance

Too many transitions or complex animations can cause serious performance issues

The browser runs animations better over time (device starts to dedicate resources to the tab, cache builds up) so tests need to be done on a fresh incognito (or equivalent) window to ensure performance is good for first time users

Test on older devices that may have slow hardware, or may have older browsers due to lack of support for newer updates

Performance "hacks" - translate3d, translatez

More modern method "will-change"

Check out José Rosário’s page on Medium article: https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108 for an in-depth breakdown

Segment 4 - Animation Frameworks

Three.js

Dependant on WebGL

Full 3D render capable

Is complex to start with

has been around now for 8+ years so a little bit bloated yet still supported

Anime.js

Fastest/best performance large scale animation library

Extremely lightweight

Could replace Three.js due to simplicity and modern architecture

ScrollReveal.js

Specific library for animation while scrolling

Using specific libraries for certain tasks maskes code more lightweight

Usually easier to implement then a larger more customizable library

Web News - Inconsistencies and Separation

Mobile versions (app or mobile site) vs Desktop versions (apps or site)

Separation of apps (multiple apps - same service/function)

Inconsistent development features in an ecosystem

Patreon Supporters

Grigory Rechkin

You can find us on...

Facebook | Twitter | Instagram

RSS | Patreon | Spotify

Medium | YouTube | GitHub

New! - Reddit

...more

View all episodes

By Matt Lawrence and Mike Karan

4.8

4646 ratings