Dive into a comprehensive 5-hour course on motion design for web projects, covering techniques using video, CSS, JavaScript, GSAP, SVG, and Lottie. Learn the principles of motion design and explore cutting-edge tools through 19 practical exercises. Master adding videos to web pages, optimizing for performance, creating CSS transitions and animations, animating illustrations and icons, implementing interactive animations, and incorporating parallax effects. Gain hands-on experience with product features, hero sections, dropdowns, image galleries, accordions, loading screens, animated logos, typewriter effects, and responsive design considerations. Download the provided starter kit to follow along and elevate your web design skills by bringing your websites to life with captivating motion.
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+
