UI animations play an important role for web apps and websites in improving the user experience. But creating animations can be difficult, or done excessively. Learn CSS animation basics and transition to advanced concepts like orchestration and choreography. Techniques you’ll learn: CSS transitions, animations, custom properties, data attributes, choreography, animation states, layout animations, and reactive animations with a little bit of JavaScript.
Overview
Syllabus
- Introduction
- Course Overview
- Animation Fundamentals
- Animation Easing
- CSS Variables
- What to Animate
- CSS Transitions
- Button Transition Exercise
- Button Transition Solution
- CSS Keyframes
- CSS Keyframes Exercise
- CSS Keyframes Solution
- Choreography
- Stagger Animation Exercise
- Stagger Animation Solution
- Composing Animations
- Using Animations in React
- States & Data Attributes
- Creating a Simple State Machine
- State Machine Q&A
- Animating States Exercise
- Animating States Solution
- Layout Animation FLIP Technique
- FLIP Technique Q&A
- FLIP Technique Exercise
- FLIP Technique Solution
- Pointer Events
- Lerp Technique
- In-Flight Application Animations
- prefers-reduced-motion
- Recreating an Animation
- Wrapping Up
Taught by
David Khourshid
