CSS Transitions & Animations

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