3 tips for creating GSAP animations in 2024

As a reminder, web development (front-end) consists mainly of 3 languages:

• HTML: Structure elements (Image, Heading, Paragraph, Link, etc.)
• CSS: Styles (colors, fonts, sizes, etc.)
• JavaScript: Behaviors (Animations, actions, etc.)

And very often... Learning JavaScript is scary. That's why, in this article, I'm going to ;

1. Introduce you to GSAP, a library of pre-designed code (with "Plugins") for integrating and using JavaScript more easily on your sites.
2. But also, share with you my 3 favorite resources for learning how to use the GSAP library (GreenStock)

Ready to go?

1. GSAP

A picture is worth a thousand words?

1.1 What is GSAP?

💡 GSAP is a cross-browser JavaScript code library that lets you animate just about anything on the Web.

The CORE library (although comprehensive) remains lightweight, as numerous animations are added via plugins to extend its initial capabilities.

1.2 Why use GSAP to create Web animations?

This library is becoming increasingly popular, as it's not only "simpler" to use than creating hard JS code. It also offers better overall performance:

1. Performance: GSAP animations are known for their fluidity and speed. Both criteria are important for the user experience when visiting your site.
2. Flexibility: GSAP can animate any property on the web: CSS, attributes, SVG, etc...
3. Compatibility: GSAP manages cross-browser incompatibilities, ensuring that animations work just as well with Google Chrome as with Safari or Firefox, for example.
4. Support and Community: GSAP's teams and community have created numerous resources to help and share advice. This makes the library accessible and understandable to many more people (including your customers, for example!).
5. Ease of integration: GSAP offers a plug-in system to facilitate the integration of advanced animation.

(Bonus) Regular updates: GSAP teams keep the library up to date with the latest web trends and recommendations. So the tool is constantly evolving!

Well, having said that, perhaps now you'd like to see what a GSAP animation looks like on a website? 😏

1.3 Example of sites with GSAP animations

I think the best way to get a feel for the possibilities is simply to take a look for yourself!

On the GSAP website, in the Showcase area, you'll find a number of projects showcasing sites that have used the GSAP library to animate them.

Discover the GSAP Showcase

1.4 GSAP prices

GSAP is a paid tool, which offers a free service.

With the freenium offer, you can already do a lot. Especially if you're still in the learning phase! But here are the 4 GSAP offers:

• GSAP: Thisfree package includes the main GSAP library and public plugins such as ScrollTrigger(8 plugins).
• GSAP Plus: For $99/year, this offer is aimed at individuals who want access to certain additional plugins.(14 Plugins)
• GSAP Premium : For $149/year,(20 Plugins)
• GSAP Business : At $199/year, this package includes everything in GSAP Premium, andalso adds a commercial license for all your projects.

Note: PRO (Business) prices are regressive if there are several developers in the team.

Test GSAP free of charge

2. My tips for learning how to create animations with GreenSock

A fan of"Learn by Doing", I think one of the best ways to learn how to create on the Web in general is to :

→ Try to make

→ Reread the documentation or ask an AI or look at a model

→ Try again

→ Repeat until you understand

So I'm going to show you my"Tool Stack" and the method I recommend for learning how to create animations using GSAP.

💡 A basic knowledge of HTML and CSS is preferable.

2.1 Webflow: Visual development platform (low-code)

Webflow is a visual (low-code) development platform. With its WYSIWYG interface for visually manipulating HTML/CSS, combined with the ability to add Custom Code, I find the tool ideally suited to learning and testing your GSAP animations. Once you've opened your Webflow project, all you have to do is :

1. Create HTML and CSS elements using the Webflow designer
2. Integrate your codes into the custom code of your project and/or pages
3. Publish and test the results!

Doubt it? Test Webflow

2.2 - GSAP.com documentation and resources

One of the great strengths of the tool, for me, is the quality of the pedagogical ecosystem they've created around the bookstore.

GSAP has set up a resource center, giving you access (free of charge) to a variety of educational content, such as :

Comprehensive documentation :

Everything you need to know about the bookshop, from A to Z.

Link to documentation

And resources to help you learn:

• Installation guides (+ Plugins)
• Videos (GSAP Youtube channel)
• Templates
• Comprehensive GSAP training courses (provided by community members)

In short, an eco-system conducive to getting the tool into the hands of as many people as possible. Bravo!

Take a look at the free resources on the GSAP.com website.

Bonus: Webflow x GSAP synergy

If you're a Webflow user, the GSAP teams have thought of you!

Discover the documentation specially designed for Webflow integration

2.3 - Chat-GPT (AI)

3rd tool in the learning stack: Chat-GPT AI as a teaching assistant.

Using Chat GPT as a teaching assistant is something I've been recommending for several months now, particularly for those who are getting to grips with JavaScript. The method is "pretty simple" and basic: you've got a question or something isn't working? Simply present your case to Chat-GPT, detailing your need and what you'd like to achieve. Be as specific as possible , and don't hesitate to include any elements you consider relevant. Then wait for the AI's response. If your description is detailed enough, it's very likely that theAI will help you correct your bug or integration error.

What's more, with the recent update to Chat-GPT-4, you can now ask the AI to explore a web page. This new feature can be extremely useful if you're looking to understand specific behavior on a website page you're using as a reference.

Bonus: Slater.app (For Webflow)

If you want to work with or learn to create animations with GSAP using the Webflow x GSAP + AI synergy, Slater is certainly a good idea.

With the ability to integrate Custom Code (without the 10k character limit) and GPT's artificial chat intelligence directly integrated from your Webflow interface, I definitely recommend you take a look...

Advantages of using Slater to integrate GSAP into Webflow :

• Fast code iteration (no need to publish your project to see if the code works: Ctrl/CmD+S > F5 is enough! )
• Integrated AI support
• More visual interface

Discover Slater.app →

3. More community resources

And if you are interested in GSAP x Webflow and would like to go further, here are some resources from community creators that I invite you to follow:

1. WebBae's YouTube channel (🇺🇸)
2. Timothy Ricks' YouTube channel (🇺🇸)
3. Digidop YouTube channel (🇫🇷)
4. Newsletter from Digidop (🇫🇷) →
5. My X account (Ex-Twitter) (🇺🇸)

We look forward to seeing you in the next YouTube video from Digidop, with the release of a new tutorial on creating a GSAP animation with Webflow!