Integrating Webflow with GSAP for nice and smooth animations and page transitions

You’ll agree that honest no-code developer often wonders: What would I do if there were no animations at all? Luckily for us, Webflow made sure that our lives as no-code developers were a bit easier with its built-in Interactions feature. Interactions in Webflow can modify and animate almost every CSS property that exists in Webflow’s styling sidebar. But with the keyword being almost.

Although Webflow's built-in Interactions are convenient, many developers find that there are significant limits when trying to implement complex animations and interactions. Also, this article wouldn’t be necessary if Webflow’s interactions could solve all our developing problems. Many developers who are using only native Webflow’s interactions aren’t familiar with the full power that animation libraries can offer. Therefore, because of that, developers choose to rely on libraries like GSAP to open up more possibilities with their animations.

Before we start talking about implementing our GSAP custom code for our Webflow project, bear with me as I introduce you to the term animation in the context of web development.

What are animations?

Animations are all about changing the state of a component that we want to be animated. It doesn’t matter if we talk about classic animation, Webflow animation, or GSAP animation; the principle is the same. For our animation to truly qualify as an animation, the component we are animating must have both a starting state and an ending state. The third state is known as interpolation, encompassing all the states the component transitions through from the starting state to the ending state.

In the context of Webflow interactions, we have our timeline, where in point A we define our default state with the famous set as the default checkbox that’d be our starting state, and later in point B we define an ending state. All those states in between points A and B are called interpolations. That’d be enough for now, We can now meet the GreenSock animation platform - GSAP.

What is GSAP?

The GreenSock animation platform, or simply GSAP, is a robust JavaScript library that makes it easy to create from the simplest to the most complex animations on websites. GSAP has numerous free and paid plugins that serve different purposes when animating on the web. GSAP is like a toolbox full of easy-to-use tools for moving, fading, rotating, and transforming elements on the web, and a lot more.

The purpose of this article is to get you familiar with all the possibilities that GSAP offers. We will not cover each GSAP plugin one at a time, so we don’t make it too overwhelming.

Webflow’s Interaction feature & GSAP

An important thing to note is that no-code developers who are beginning their journey really should use the interaction feature as their starting point. It is perfectly suitable for those who are just starting, as they can still build amazing experiences by just using it. For those who are ready to dive a little deeper below surface and start implementing custom code to animate components, I will introduce to you the GSAP library.

Starting point - GSAP & Webflow

The team that built this library once said that GSAP can simply animate anything that JavaScript can touch. What they mean by that is that by using it, you choose the component that you want to animate the same way you would select it by using the querySelector() method in your JavaScript code. You no longer have limitations when it comes to what you’d like to animate.

What can be animated?

• CSS properties
• SVG
• Canvas & WebGL
• Text
• Scroll-Based Animations

CSS properties animation

GSAP can animate virtually any CSS property, allowing for smooth transitions and transformations on web elements. This includes some properties that Webflow’s interactions still cannot animate: border-radius, gradient colors, and also filter properties like blur, contrast, drop shadow, etc.

SVG animation

Animating Scalable Vector Graphics (SVG) with GSAP can be highly detailed and smooth. It’s often used for graphics that need to be scalable without losing quality. As powerful as it is, there are a total of five GSAP tools that can animate SVG, with four of them being for GSAP members only.

• Motion Path (free)
• DrawSVG
• MorphSVG
• MotionPathHelper
• Draggable + Inertia

Canvas & WebGL animation

In one sentence, MDN docs described that WebGL (Web Graphics Library) is a JavaScript API for rendering high-performance interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins. Graphics are usually presented on an HTML tag canvas.

GSAP is compatible with animating objects that are rendered on canvas. You can animate the position, color, and size of those objects and create smooth animations by updating the canvas frame-by-frame.

Text animation

If done in a in a subtle and clean way, text animations on a website can really make the website feel different. Although it’s a paid feature, GSAP enabled amazing plugins for animating text that, of course, can be recreated using native JavaScript, and people have already done that, so with a little bit of Google research, you can find them and bypass paywalls.

• Text (free)
• SplitText
• ScrambleText

ScrollTrigger

Save the best for last, as they say, and it’s not because it’s a completely free plugin. Scroll Trigger may be the most popular and powerful feature that GSAP offers. ScrollTrigger enables developers to craft intricate scroll-based animations with precision and simplicity. But how is it really different from the Webflow Scroll animation feature?

At first glance, both ScrollTrigger and Webflow’s Scroll animations might seem to offer similar capabilities, enabling elements to animate as users scroll through a webpage. However, the true power of ScrollTrigger lies in its extensive customization options and seamless integration with GSAP’s robust animation library.

With its outstanding precision and control over scroll-based animations, ScrollTrigger enables complex, multi-stage animations with precise triggering options and synchronization with scroll positions. Thanks to its complex functions, animations can be seamlessly linked to scroll motion.

Implementation process in Webflow

Like you would’ve guessed, custom code is required in order for GSAP to work, so the first step to start animating using GSAP is to include it through CDN before the </body> tag on the page that you’d like to animate.

CDN links for inclusion can be found here on the GSAP documentation website.

It’s pretty intuitive. If you just want the core GSAP library, then you copy the only link that is showing, but if you want to use some free or membership plugin, you must checkbox it, and then you will receive a link for it too.

How animating with GSAP works?

For basic animation, you animate an object using GSAP by following three steps:

1. Call Tween method
2. Select what you want to animate
3. Set properties that you want to be animated

First, choose the tween method; it’s basically just a method that we call on our GSAP object. The most popular tween methods are:

• gsap.to() - basically, it animates FROM our default value TO what we specify inside the method
• gsap.from() - it animates FROM what we specify inside the method TO our default value.
• gsap.fromTo() - we can specify both FROM and TO custom states from where we’d like our object to be animated.

Second, we want to select an HTML element that we want to be animated, selection is working the same as the querySelector() document method in JavaScript. Inside quotes, you specify the element's selector.

Third and final, inside an object {}, as a second argument in the tween method, we specify properties that we want to be animated.

Create first animation

Let's dive into a simple GSAP example together. Our goal is to make a heading tag slide from left to right while also changing the body's background from one gradient to another.

I’ve created a showcase example in codesandbox so you can analyze it and follow along. There are some bonuses in there.

GSAP takes default, starting values as our current stylings for object that we desire to animate. In our case, our H1 will be centered. Also, the body would initially have its own default gradient, as you can see in the example that I’ve provided.

We can now start implementing GSAP methods in our custom code.

For the H1 element, we'll follow three steps: Choose the "gsap.from" tween method, select the element by its ID as the first argument, and for the second argument, specify a JavaScript object that contains properties to animate from. The process is the same for animating Body as well.

Conclusion

For no-code developers looking for flexibility and wanting more creativity in their animations and more of what’s possible with Webflow, mastering GSAP is a game-changer. The combination of Webflow’s intuitive design capabilities and GSAP’s powerful animation tools opens up new dimensions, enabling the creation of websites that are highly interactive and engaging.

Investing time in learning GSAP can pay off significantly, as it empowers you to bring your most ambitious design visions to life. Whether you’re creating subtle animations to enhance the user experience or crafting complex, interactive scenes that captivate users, GSAP is the tool that can help you achieve it all.