Today we’ll take a look at GSAP3 – one of the most advanced JS libraries for animating. It’s been out there for quite a long time and during the years it has evolved to a complete and finished toolkit. I hear it’s really simple to use, so let’s dive into it.
We’ll be creating a simple project where we give a static icon a little bit of motion to achieve more dynamic effect. You can see a preview at the end of this post.
The Basics of GSAP
The main two componets are Tween and Timeline. You provide them with the selector you want to animate, the CSS properties you’ll animate in addition with a complete list of optional configurators. GSAP documentation is the perfect tool for reference, so I recommend to use it every time you are stuck or need help. The most basic example looks like this.
// Simple tween
gsap.from('.box', {y: 100, opacity:0});
Ok, so
Tween is used for simple and straight-forward animations. In most cases its packed into one line of code, as shown in the example above. Timeline, on the other hand gives you more control over the animation. In another scenario, we want to create a progress loader and after it finishes loading, display some text. Preview codepe here.
// Basic timeline example
// We create an instance of timeline and give it a name with variable
var tl = gsap.timeline();
// Animate the properties you want with defined direction (from, to, etc.)
tl.from('.loader', {opacity: 0, duration: 1})
.to('.loader span', {width: '100%', duration: '1.5'}, '+=0.5')
.from('.loading-text', {opacity: 0, y: 10, duration: 0.3});
After we’ve grasped the basics of GSAP, we’ll go ahead and animate beautiful parrot icon and polish it even further. This process for animating icons with code has proven solid over the years for me.
- Open a vector editing software of your choise. I use Adobe XD, because it’s free and very fast.
- Group your layers and give them name for easier access with your code.
- This is optional, but I like to compress the SVG through an online converter like SVGOMG to simplify it further.
- Import the SVG in your HTML and go through the code to ensure that all layers are named and grouped properly.
- Give it some CSS styling if needed.
- Proceed with GSAP and in your JS files create a timeline and start to animate the different properties.
You can see the result final result below.
The possibilities of GSAP are endless and what I’ve shown you today only grasps the surface. If you want to get inspired, I suggest you take a look at the examples listed in their showcase page. It’s really motivating to see what other developers and designers come up with.
