Christina GortonGreenSock updated it's API to version 3. If you would like to explore how to get started with GSAP 3 check out the mini-challenges and solutions below.
For reference while animating
To get started with GreenSock, use the gsap.to method
Use the CodePen below and follow the directions. Once you give it a try you can check out the solution I provided.
✅ Good first objective. Try to animate these divs.
- Make one of the divs move left and right
- make on of the divs move up and down
- make one of the divs scale up or down
- make one of the dives fade in and out
- Try out GreenSock's stagger property to make all of the divs animate.
Solution examples:
Check out after you have tried the stagger yourself
Animating SVGs
✅ Here are basic SVG shapes. Use what you learned above to animate the SVGs. You can look for each SVGs ID in the HTML and animate them individually.
Solution example:
Timeline animations
In the pens below I challenge you to set up reusable functions that you can add to a single master timeline.
This helps clean up your code and allows you to add the same animations to several different elements.
Check out the documentation for Timelines and then check out the solution pen.
In it I break down how I use gsap.set, gsap.timeline, reusable functions and then how I combine them all in to a single master timeline.
✅ You can use this pen to either keep practicing animating SVG's with tweens or with timelines.
Solution:
Check out this pen after you have tried to use reusable functions and a master timeline.
More Resources:
How to animate on the web with GreenSock
Getting started examples:
Finding inspiration and Creating SVG
Have fun with GreenSock's Draggable and Hello Kitty
Great resource to explore writing TimeLines
Writing Smarter Animation Code
Extra courses:
Sarah Drasner: Frontend Masters: SVG essentials & Animation
My course: Intro to SVG and GreenSock Animations
