Google, IBM & Microsoft Certificates — All in One Plan
Free courses from frontend to fullstack and AI
Overview
Syllabus
Welcome to this motion design course
The basics of motion design for the web
Adding videos to a web page
Exercise #1: Product feature with video
Exercise #2: Hero section with video background
Optimizing video for web performance
Introduction to CSS transitions
Exercise #3: Website header
Adding motion with CSS transitions
Exercise #4: Simple dropdown menu
Exercise #5: Image gallery
Exercise #6: Cool accordion
Introduction to CSS animations
Exercise #7: Simple loading screen
CSS animations vs. CSS transitions
Exploring loading animations
Exercise #8: Site preloader
Exercise #9: SVG text loader
Exercise #10: Button with animated loading dots
Animating illustrations and icons
Exercise #11: Animated Lottie icon
Exercise #12: Animated menu icon
Exercise #13: Animated illustration
Exercise #14: Animated avatars
Creating accent animations
Exercise #15: Animated logo
Exercise #16: Typewriter effect
Playing around with interactive animations
Exercise #17: Mouse follow effect
Exercise #18: Scroll-triggered animation
Adding depth and dimension with parallax
Exercise #19: Parallax animation
Motion and responsive web design
Thanks and goodbye!
Taught by
Envato Tuts+