Challenge: Get started with GSAP 3
Tags: svg, webdev, javascript, challenge
Published: 2020-03-10 18:47:04

---
title: Challenge: Get started with GSAP 3
published: true
description: Mini challenges and solutions to get up and running with GSAP 3
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/zuadvb3ctcutj9l6khro.jpg
tags: #svg, #webdev, #javascript, #challenge
---

GreenSock 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**

[GreenSock's Docs](https://greensock.com/docs/)

[Ease Visualizer](https://greensock.com/ease-visualizer/)

To get started with GreenSock, use the [gsap.to method](https://greensock.com/docs/v3/GSAP/gsap.to())

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.**
{% codepen https://codepen.io/cgorton/pen/vYYXoEQ %}

1. Make one of the divs move left and right
2. make on of the divs move up and down
3. make one of the divs scale up or down
4. make one of the dives fade in and out
5. Try out GreenSock's stagger property to make all of the divs animate. 

**Solution examples:**
{% codepen https://codepen.io/cgorton/pen/wvapbRJ %}

Check out after you have tried the stagger yourself
{% codepen https://codepen.io/cgorton/pen/MNbYBP %}

## 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. 

{% codepen https://codepen.io/cgorton/pen/wLRPXN %}


**Solution example:**
{% codepen https://codepen.io/cgorton/pen/OJVzeWj %}


## 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](https://greensock.com/docs/v3/GSAP/Timeline) 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](https://greensock.com/docs/v3/GSAP/Timeline). 

{% codepen https://codepen.io/cgorton/pen/xxxEvQQ %}

**Solution:**
Check out this pen after you have tried to use reusable functions and a master timeline.

{% codepen https://codepen.io/cgorton/pen/NWqXZXz %}


**More Resources:**

[How to animate on the web with GreenSock](https://css-tricks.com/how-to-animate-on-the-web-with-greensock/)

[GSAP 3 features](https://tympanus.net/codrops/2019/11/14/the-new-features-of-gsap-3/)

Getting started examples:
[Finding inspiration and Creating SVG](https://dev.to/coffeecraftcode/finding-inspiration-and-creating-svg-3m7b)

[Have fun with GreenSock's Draggable and Hello Kitty](https://dev.to/coffeecraftcode/have-fun-with-greensock-s-draggable-and-hello-kitty-996)

Great resource to explore writing TimeLines
[Writing Smarter Animation Code](https://css-tricks.com/writing-smarter-animation-code/)

**Extra courses:**

Sarah Drasner: [Frontend Masters: SVG essentials & Animation](https://frontendmasters.com/courses/svg-essentials-animation/)

My course: [Intro to SVG and GreenSock Animations](https://designcode.io/svg-intro)