Animate Vector Graphics for the Web

Alex Trost, Frontend Developer and Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
14 Lessons (1h 16m)
    • 1. Introduction

      1:15
    • 2. SVG Shapes

      6:59
    • 3. Grouping and Styling SVGs

      3:30
    • 4. Intro to Greensock

      10:43
    • 5. Prepare the Scene

      7:00
    • 6. Beach Ball Sliding

      6:23
    • 7. Beach Ball Rolling

      5:15
    • 8. Sun Flare

      6:22
    • 9. Sliding the Fence

      4:19
    • 10. Sliding Landscape

      7:40
    • 11. Rolling Waves

      5:06
    • 12. Sliding Surfboards

      4:32
    • 13. Flying Bird

      6:29
    • 14. Final Thoughts

      0:45
86 students are watching this class

Project Description

Share your beach animation! 

Follow along with Alex Trost and animate each element of your beach landscape SVG Illustration. You can download the code here or start by clicking “Fork” on this CodePen. Then add your GreenSock code to animate the JavaScript.

When you finish, go ahead and add more animations using the skills you’ve learned in this course. Share what you come up with in the project gallery. Link us to your CodePen so we can see what you’ve done, and so other students can see how you did it!

Resources

Student Projects

project card
Anton Smid
2 comments