GSAP: Starting from the bottom….
I love animations! Anything that makes the user go “oooh” makes me excited! So I was thrilled when I came across the GreenSock Animation Platform.
Wait, what is that?
GSAP or GreenSock, is a Javascript library, very much like jQuery or Underscore.js, except it focuses solely on animation and as such, GSAP gives you many, many options for controlling/setting/creating animations.
I like GSAP because it’s been around for awhile, and is used quite widely. As a result, there are many tutorials and CodePens to help you get started! As well, the GSAP documentation is clear and very searchable.
Disclaimer: This is a beginner level tutorial, so if you’ve never heard of GSAP before, keep reading! If not, maybe head back to Google and find something a little more advanced.
Resources
If you’re looking for a great tutorial on GSAP, head over to Petr Tichy’s website. He has two great free tutorials and several more paid tutorials that familiarize you with the basics of GSAP and using GSAP with Scroll Magic.
This cheat sheet is also hugely helpful as a quick reference for what you can and cannot do with whatever GSAP library you are using.
Finally, the GSAP website itself has some great information to help get you started, here are a few of my favourites, but a quick Google search with whatever you are looking to do with GSAP, will also do the trick:
- Understanding timelines
- Basic syntax
- GSAP CodePens to familiarize yourself with what you can do with this huge library.
Quick GSAP Animation Tutorial
We are going to animate a CBC Logo that was created using HTML and CSS. Please follow the link to CodePen to see the final animation in action.
Importing Your Library
First, you need to import GSAP into your project. Here is a list of GSAP CDNs.
GSAP comes in several iterations. You can choose which one to use, based on the needs of your project.
- TweenLite: a basic set of animations, small files size
- TweenMax: all of the GSAP library (includes the following plugins: CSS, RoundProps, Bezier, Attr, EasePack, DirectionalRotation), larger file size
On top of the two basic libraries above, GSAP offers a host of other plugins both to their paid and unpaid members. Plugins like SVG only come with a paid subscription however. For information on buying a GSAP Club Membership, starting at $50, go here.
The GSAP “No Charge” License does allow you to use their library for free as long as you are not charging your visitors anything to view your content. Otherwise, you will need to buy a GSAP Club Membership.
The Basic Syntax
For the CBC Logo animation, the first thing I did was declare my variables. Using, jQuery, I found the elements on the page I wanted to animate and I saved them in variables. See a small sample of variables below.
var one = $('.animateOne'),
two = $('.animateTwo'),
three = $('.animateThree'),
four = $('.animateFour'),
five = $('.animateFive'),
six = $('.animateSix'),
seven = $('.animateSeven'),Second, I created my TimeLine variable and gave it a value of “paused”, meaning I did not want the animation to start on page load.
var tlMove = new TimelineMax({paused: true});I created buttons in my HTML and used jQuery click functions and the GSAP methods of .play(); and .reverse(); to give these buttons control of my animation.
btnPlay.on('click', function(){
tlMove.play();
});btnReverse.on('click', function(){
tlMove.reverse();
})
Finally, I created my animations. All thirteen pieces of the CBC logo are animated using the same GSAP method of .from();. The .from(); method takes one set of variables and tells GSAP where you want your element to move from. The element will therefore move from the set of variables you give GSAP, to wherever you’ve styled it using CSS. GSAP gives you many methods like .to(); .fromTo(); .staggerTo(); which allow you to animate your element in different ways.
Next, I called my timeline variable as I needed to attach/assign all the animations to this timeline.
Below is an animation for one element on the page with the timeline variable.
tl //timeline variable
.from(seven, 0.5, {x: -100, scale: 2, autoAlpha: 0, ease:Power1.easeOut}, 0.3)The above code is telling GSAP the following:
- Call the method .from(); and attach it to the timeline variable
- seven — the element on the page that will be animated
- 0.5 — the length of time the animation will last
- Everything within the curly brackets are variables that dictate where this animation will start from. AutoAlpha is a GSAP property that sets your element to visibility: hidden; and opacity: 0, a common place to start an animation
- Finally, after the curly brackets, I assigned my animation to the timeline using an absolute value. There are several other ways of assigning animations to a timeline, see this tutorial for more information.
That’s it! Now we repeat the same syntax with slightly different variables for all the elements on the page to create our final animation!
Like this post? Please let me know on Twitter @talialongname.
