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

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

00:0000:00
Share | Download(Loading)