Motion Design for the Web
In this motion design tutorial, you‘ll learn how to include motion in your web design projects using video, CSS, JavaScript, GSAP, SVG, Lottie, and more. This course will help you bring your websites to life.
About the Course:
This course introduces you to the essentials of motion design for the web, from adding videos and creating CSS transitions to mastering animations and interactive effects. Through hands-on exercises, you’ll learn how to design engaging product features, hero sections, image galleries, buttons, and more. Explore techniques like SVG text loaders, parallax effects, Lottie animations, and responsive motion design to elevate your web design skills.
- Introduction to motion design for the web
- Adding and optimizing videos for web performance
- CSS transitions and animations
- Exercises: product features, hero sections, website headers, dropdown menus and more
- Creating interactive effects: loading screens, SVG text loaders, button animations
- Animating illustrations, icons, Lottie, avatars, and logos
- Typewriter, mouse follow, scroll-triggered, and parallax animations
- Responsive web design and motion integration
