Motion Design for the Web

Motion Design for the Web

Envato Tuts+ via YouTube Direct link

Animating illustrations and icons

20 of 34

20 of 34

Animating illustrations and icons

Class Central Classrooms beta

YouTube videos curated by Class Central.

Classroom Contents

Motion Design for the Web

Automatically move to the next video in the Classroom when playback concludes

  1. 1 Welcome to this motion design course
  2. 2 The basics of motion design for the web
  3. 3 Adding videos to a web page
  4. 4 Exercise #1: Product feature with video
  5. 5 Exercise #2: Hero section with video background
  6. 6 Optimizing video for web performance
  7. 7 Introduction to CSS transitions
  8. 8 Exercise #3: Website header
  9. 9 Adding motion with CSS transitions
  10. 10 Exercise #4: Simple dropdown menu
  11. 11 Exercise #5: Image gallery
  12. 12 Exercise #6: Cool accordion
  13. 13 Introduction to CSS animations
  14. 14 Exercise #7: Simple loading screen
  15. 15 CSS animations vs. CSS transitions
  16. 16 Exploring loading animations
  17. 17 Exercise #8: Site preloader
  18. 18 Exercise #9: SVG text loader
  19. 19 Exercise #10: Button with animated loading dots
  20. 20 Animating illustrations and icons
  21. 21 Exercise #11: Animated Lottie icon
  22. 22 Exercise #12: Animated menu icon
  23. 23 Exercise #13: Animated illustration
  24. 24 Exercise #14: Animated avatars
  25. 25 Creating accent animations
  26. 26 Exercise #15: Animated logo
  27. 27 Exercise #16: Typewriter effect
  28. 28 Playing around with interactive animations
  29. 29 Exercise #17: Mouse follow effect
  30. 30 Exercise #18: Scroll-triggered animation
  31. 31 Adding depth and dimension with parallax
  32. 32 Exercise #19: Parallax animation
  33. 33 Motion and responsive web design
  34. 34 Thanks and goodbye!

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.