\n

Step 2: Set Up Your Webflow Page

\n

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

\n\n

Step 3: Write the GSAP Animation in JavaScript

\n

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.

\n

// 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
});

\n

Let's review what we are doing:

\n\n

Step 4: Customize Your Animation

\n

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

\n\n

Example:

\n

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\"
});

\n

Step 5: Test and Optimize

\n

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.

\n

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.

\n

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

\n

\n
\n
\n

Your projects, supported by Slater

\n

👀 Lots going on here. Congrats Dennis!

\n

\n
\n
\n\n\n\n
\n
Dennis Snellenberg
\n\n
\n
@codebydennis
\n
\n\n
2:39 AM • Oct 10, 2024
\n
\n\n\n\n\n\n
1
Retweets
44
Likes
\n\n
\n

\n

🤙 the Slater Team

\n

\n

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

\n
Become a Pro Slater User
\n\n\n\n","recentPosts":[{"id":7606258,"title":"🎅 Merry Christmas and a happy New Year","slug":"merry-christmas-and-a-happy-new-year","status":"published","readingTime":1,"campaignCompletedAt":"2024-12-23T17:30:16.000Z","publishedAt":"2024-12-23T17:30:16.000Z","orderByDate":"2024-12-23T17:30:16.000Z","timeAgo":"3 days","thumbnailUrl":"https://embed.filekitcdn.com/e/f2wTcXHNz6CCWc9a5vGTv3/8ZxHHAV3Z2NzLd9MJGAnuw/email","thumbnailAlt":"","path":"posts/merry-christmas-and-a-happy-new-year","url":"https://slater.kit.com/posts/merry-christmas-and-a-happy-new-year","isPaid":null,"introContent":"The team behind Slater would like to wish you a Merry Christmas and a happy New Year! 🎄🎅🎁 Get the Santa ASCII art: https://slater.app/projects/11431/pages/27608 Happy coding! 🤙 the Slater Team If Slater helps you create better websites, please support the team behind it. Become a Pro Slater User","campaignId":17709207,"publicationId":14255672,"metaDescription":""},{"id":7537398,"title":"🗂️ Files","slug":"files","status":"published","readingTime":2,"campaignCompletedAt":"2024-12-13T18:14:13.000Z","publishedAt":"2024-12-13T18:14:13.000Z","orderByDate":"2024-12-13T18:14:13.000Z","timeAgo":"13 days","thumbnailUrl":"https://embed.filekitcdn.com/e/f2wTcXHNz6CCWc9a5vGTv3/4FZpgpss7uN1AgRNMpqRiS/email","thumbnailAlt":"","path":"posts/files","url":"https://slater.kit.com/posts/files","isPaid":null,"introContent":"Earlier this year, we built figdam.com. It is currently used by several of our clients to host files and watermark PDFs. We’d like to bring this file hosting functionality to Slater users. With that in mind, where do you currently store files that Webflow doesn’t support? Would this feature be useful to you? What file hosting features do you need? Let us know. JS 101: File types File storage? Javascript? Let's consider all of the different file types that you could host and then retrieve and...","campaignId":17627169,"publicationId":14173259,"metaDescription":""},{"id":7528614,"title":"👋 EA Office Hours this Friday, 3 PM EST","slug":"ea-office-hours-this-friday-3-pm-est","status":"published","readingTime":1,"campaignCompletedAt":"2024-12-12T21:55:16.000Z","publishedAt":"2024-12-12T21:55:16.000Z","orderByDate":"2024-12-12T21:55:16.000Z","timeAgo":"14 days","thumbnailUrl":"https://embed.filekitcdn.com/e/f2wTcXHNz6CCWc9a5vGTv3/k23TtrHKgV6qYT84ZW7Bqr/email","thumbnailAlt":"","path":"posts/ea-office-hours-this-friday-3-pm-est","url":"https://slater.kit.com/posts/ea-office-hours-this-friday-3-pm-est","isPaid":null,"introContent":"Hi, Just a reminder that Kendra and Mason will be hosting an EA Office Hours Zoom this Friday, the 13th (spooky…) to chat about topics relating to Chapter 1: Sales for Creative Types. Sign up if you can make it, and bring your questions. Let’s get past any lingering sales ick together. Register to join us this Friday, 12/13 here. Also, if you can’t make it this week, we’re thinking about doing it again next Friday, 12/20 as well, if anyone is game? To ring in the holiday break, we’ll chat...","campaignId":17617126,"publicationId":14163203,"metaDescription":""}],"newsletter":{"formId":4967504,"productId":null,"productUrl":null,"featuredPostId":null,"subscribersOnly":false},"isPaidSubscriber":false,"isSubscriber":false,"originUrl":"https://slater.kit.com/posts/webflow-conf-gsap","creatorProfileName":"Welcome To Slater!","creatorProfileId":1135261}🥳 Webflow Conf & GSAP

🥳 Webflow Conf & GSAP


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:

video preview

Slater Sessions - GSAP + Webflow via Chat with Witt

video preview

Learn GSAP for Webflow with Aron Korenblit and Cassie Evans

video preview

Combining Slater With GSAP | With Yar Al Roshidi

video preview

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!

🤙 the Slater Team

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

Welcome To Slater!

Slater resources, updates and community activity

Read more from Welcome To Slater!

The team behind Slater would like to wish you a Merry Christmas and a happy New Year! 🎄🎅🎁 Get the Santa ASCII art: https://slater.app/projects/11431/pages/27608 Happy coding! 🤙 the Slater Team If Slater helps you create better websites, please support the team behind it. Become a Pro Slater User

Earlier this year, we built figdam.com. It is currently used by several of our clients to host files and watermark PDFs. We’d like to bring this file hosting functionality to Slater users. With that in mind, where do you currently store files that Webflow doesn’t support? Would this feature be useful to you? What file hosting features do you need? Let us know. JS 101: File types File storage? Javascript? Let's consider all of the different file types that you could host and then retrieve and...

Hi, Just a reminder that Kendra and Mason will be hosting an EA Office Hours Zoom this Friday, the 13th (spooky…) to chat about topics relating to Chapter 1: Sales for Creative Types. Sign up if you can make it, and bring your questions. Let’s get past any lingering sales ick together. Register to join us this Friday, 12/13 here. Also, if you can’t make it this week, we’re thinking about doing it again next Friday, 12/20 as well, if anyone is game? To ring in the holiday break, we’ll chat...