5 Animations You Should Know and Use

on YouTube ↗05m

" summary

Five concrete animations: hover animation, sticky elements, skeleton loading animations, sliding (X/Y) and opacity transitions for in-place reveals. Examples show Gmail-style hover affordances and Kent Todd’s sticky badge, with implementations in React via libraries like pose and CSS via styled components. The claim is these are simple to implement; judge by the actual code shown, the behavioural differences, numbers of elements using them, and whether they speed perceived load, clarify click targets, or make navigation more confident.

AI-written summary · about

" chapters (7)

1. 0:00Intro
2. 0:20Overview
3. 1:25Hover Animation
4. 2:10Sticky Animation
5. 2:50Skeleton Loading Animation
6. 3:10Sliding Opacity Animation
7. 4:10Final Thoughts

" related talks

• 44mFunctional AnimationSarah Drasner · CSSConf.Asia 2016
• 38mCSS in motion: Animations for fun and profitMartine Dowden · NDC Oslo 2022
• 25mLets move!Benjamin De Cock · CSSConf Australia 2015
• 43mPurpose and Style: Using Motion with Meaning in InterfacesVal Head · FITC Spotlight UX/UI 2019
• 07m5 quick animations to make your Compose app stand outRebecca Franks · Android Dev Summit 2022
• 44mPractical Web AnimationLisi Linhart · Pixel Pioneers Bristol 2019
• 18mSafer Web AnimationsJulie Grundy · OZeWAI 2020
• 37mAnimating the User ExperienceRachel Nabors · beyond tellerrand Düsseldorf 2015