​

​

How has your Webflow Conf 2024 experience been? At Edgar Allan​, we are especially excited about Webflow Analyze and Optimize and how we can leverage it for our clients and with ​Wes​. However, at Slater, we are most excited about the GSAP acquisition. We’ve been thinking about how we can better support you as you integrate GSAP and Webflow.

Let’s explore how you can use Slater with GSAP:

​

Slater Sessions - GSAP + Webflow via Chat with Witt​

​

​

Learn GSAP for Webflow with Aron Korenblit and Cassie Evans​

​

​

Combining Slater With GSAP | With Yar Al Roshidi​

​

​

Day 26/100 - GSAP Scroll Animations with Slater AI on Webflow - 100 Days of Webflow With Yar Al Roshidi​

​

​🎙️ What Webflow Conf announcements are you most excited about?​

​

​

Javascript 101: How to GSAP

In celebration of the Webflow-GSAP union, let's learn more about how to use GSAP with Slater.

Step 1: Install GSAP

First, you need to include GSAP in your project. We recommend you add this directly to Webflow header code section. We will use GSAP as well as GSAP's ScrollTrigger.
​​
​<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js"></script>

Step 2: Set Up Your Webflow Page

Create a simple HTML structure where an animation will happen as the user scrolls.

• Let's make the `body` have a min-height of 200vh so that we can scroll the page
• Let's create a 100px square with the class `.box`. Give it a color and some margin.

Step 3: Write the GSAP Animation in JavaScript

Now, let’s create the scroll-triggered animation in app.js. You can animate the .box element when the user scrolls to a certain part of the page.

// Register the ScrollTrigger plugin
gsap.registerPlugin(ScrollTrigger);
​
// Create a simple scroll animation
gsap.to(".box", {
scrollTrigger: {
trigger: ".box", // The element that triggers the animation
start: "top 80%", // When the top of the box reaches 80% of the viewport
end: "top 30%", // When the top of the box reaches 30% of the viewport
scrub: 1, // Smoothly animate as the user scrolls
markers: true. // Display start/end markers for debugging
},
x: 400, // Move the box 400px to the right
rotation: 360, // Rotate the box by 360 degrees
duration: 2, // Animation duration
ease: "power2.inOut" // Easing function
});​
​

Let's review what we are doing:

• gsap.to(): This creates a to animation, which animates the element’s properties to the specified values.
• ScrollTrigger object: The scroll trigger is configured with various options:
  • trigger: Defines the element that activates the animation when scrolled into view.
  • start and end: These define the points in the viewport where the animation begins and ends.
  • scrub: This makes the animation progress based on scroll position rather than a timeline.
  • markers: This adds markers for debugging, so you can see exactly when the trigger is activated.
• Animation Properties:
  • x: Moves the element horizontally by 400 pixels.
  • rotation: Rotates the element by 360 degrees.

Step 4: Customize Your Animation

You can easily tweak this animation by changing the properties of .box, the scroll position, or adding more effects. For example:

• Fade in/out with opacity.
• Scale up or down using scale.
• Change the background color using backgroundColor.

Example:

gsap.to(".box", {
scrollTrigger: {
trigger: ".box",
start: "top 80%",
end: "top 30%",
scrub: 1,
markers: false
},
opacity: 0, // Fades out
scale: 1.5, // Scales the box up by 1.5 times
backgroundColor: "blue", // Changes background color
ease: "power2.out"
});​
​

Step 5: Test and Optimize

Test your scroll animation and adjust the start and end triggers, easing, or other animation properties based on the user experience you want to create.

That’s it! You now have a scroll-triggered GSAP animation that fires when the user scrolls to a specific part of the page. You can continue exploring GSAP's extensive documentation to add more complex animations and interactions.

Happy coding and share with us anything cool that you make!

​

Your projects, supported by Slater

👀 Lots going on here. Congrats Dennis!

​

Dennis Snellenberg @codebydennis Another Site of the Day on @Awwwards, once again with @webflow! That’s 3 out of 3 on the design/dev combo with Dylan Brouwer. On to the next? Visit it live → http://hartmanncapital.com 2:39 AM • Oct 10, 2024 1 Retweets 44 Likes Read 3 replies

​

​

🤙 the Slater Team

​

If Slater helps you create better websites, please support the team behind it.