Mini Map
Search
⌘ K
AI Features
Log In
Animations in Angular
1.
Before We Start
Why Animations?
Course Focus and Approach
Course Structure and Intended Audience
2.
CSS Transitions
Introduction to CSS Transitions
Configurable Properties
Events
Example: Button Hover Animation
Example: Button State Change Animation
Real World Use Cases
Tips And Tricks
Quiz Yourself: CSS Transitions
Challenge: State Change With Slide Animation
Solution Review : State Change with Slide Animation
3.
CSS Animations
Introduction to CSS Animations
Configurable Properties
CSS Animations in Angular
Events
Example: Card Fade and Scale Enter Animation
Real World Use Cases
Tips And Tricks
Quiz Yourself: CSS Animations
Challenge: Spinning Animation
Solution Review: Spinning Animation
4.
Web Animations API (WAAPI)
Introduction to Web Animations API
How WAAPI works
WAAPI in Angular
Example: Controllable Animations
Real World Use Cases
Quiz Yourself: WAAPI
Challenge: Chain Animations Between Multiple Elements
Solution Review: Chain Animations Between Multiple Elements
5.
Angular Animations
Introduction to Angular Animations
States and Transitions
Sequential Animations
Parallel Animations
Multi-step Keyframes Animation
Target Multiple Elements
Target Children Elements
Route Animations
Events
Disable Animations
Quiz Yourself: Angular Animations
Challenge: Create Sequential and Parallel Animations
Solution Review: Create Sequential and Parallel Animations
6.
Third-party Animation Libraries
Introduction to Third-party Animation Libraries
Animate.css
Motion One
Popmotion
GreenSock
Quiz Yourself: Third-party Animation Libraries
Challenge: Create a Bounce on Click Animations
Solution Review: Create a Bounce on Click Animations
7.
Appendix
Animation Performance
Average Frames per Second
Multithread Processing
Average CPU Usage and Energy Impact
Debugging: Inspecting Our Animations
Debugging: Bezier Curve Editor
Setting Up Third-party Libraries
8.
Conclusion
Wrap Up!
Home
Courses
Animations in Angular
Quiz Yourself: WAAPI
Test your WAAPI knowledge!
We'll cover the following...