Interested in making animations in Javascript? Follow these tips to get started in 2 minutes:
Prerequisites:
*Familiarity with HTML
*Familiarity with Javascript; jQuery also helps!
*No prior experience with GreenSock animations! This tutorial is not a comprehensive training, and is intended to help you get started.
*Optional: CSS
Shout out to DrawKit for the illustration we'll be using today!
1) Open up a new Pen by forking this starter Codepen. (Click "fork" at the bottom of the page).
2) GreenSock should already be imported to your Pen, but you'll need to import GreenSock for any future animations. To import, click on the settings icon next to the Javascript tab. Type gsap into the search bar or add: https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js
This allows us to access the GreenSock animations library in our Codepen project.
3) Each hand and sign in the illustration is already labeled with the class "sign." We'll start our animation by calling for each element with the "sign" class.
gsap.to(".sign",{insert animation code here})
*"gsap" refers to the GreenSock animation library
*Today we'll be using .to() since we want to customize the destination of our animation, but another option would be .fromTo() or .from()
*Inside the curly brackets, we'll list out any animations that we want to apply to the sign class.
4) We'll start by scaling the signs or making them "grow" larger. We'll also add a stagger property, so that each element with the sign class starts growing 0.75 seconds apart. Copy and paste the following code line into the Javascript tab:
gsap.to(".sign",{scale: 1.2,stagger: 0.75})
5) We want the movement to look a little bit more realistic.
We'll slow it down and direct the animation to stretch up from the bottom rather than scaling towards us.
duration: 5, //add a duration of 5 seconds.
transformOrigin: "bottom" //Stretch up from the bottom
6) Lastly, we'll want this animation to loop on repeat:
yoyo: true, //repeats the animation backwards & forwards
repeat: -1, //loops your code for endless repetition
ease: Bounce.easeInOut //adds a more natural movement
You can see the final code under the JS tab:
Top comments (2)
Very nice! Greensock is great. Use it a lot for animations!
Greensock is actually a great library. I worked with it for a project and implemented a Scroll Trigger Animation. It was so smooth! Love this concise post.