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