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

Patreon Supporters

Grigory Rechkin

You can find us on...

New! - Reddit

Google Warns That NSO Hacking Is on Par Elite Nation State Spies