Create a simple HTML structure where an animation will happen as the user scrolls.
\nLet'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.
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:
\ngsap.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.x
: Moves the element horizontally by 400 pixels.rotation
: Rotates the element by 360 degrees.You can easily tweak this animation by changing the properties of .box
, the scroll position, or adding more effects. For example:
opacity
.scale
.backgroundColor
.Example:
\ngsap.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\"
});
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.
\nThat’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.
\nHappy coding and share with us anything cool that you make!
\n
\n👀 Lots going on here. Congrats Dennis!
\n
\n
|
\n🤙 the Slater Team
\n
\nIf Slater helps you create better websites, please support the team behind it.
\nBecome a Pro Slater User |
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 GSAPIn celebration of the Webflow-GSAP union, let's learn more about how to use GSAP with Slater. Step 1: Install GSAPFirst, 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. Step 2: Set Up Your Webflow PageCreate a simple HTML structure where an animation will happen as the user scrolls.
Step 3: Write the GSAP Animation in JavaScriptNow, let’s create the scroll-triggered animation in
Let's review what we are doing:
Step 4: Customize Your AnimationYou can easily tweak this animation by changing the properties of
Example:
Step 5: Test and OptimizeTest 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.
|
Slater resources, updates and community activity
👋, In August, we launched a novel approach to a marketing site with ask.edgarallan.com. Since then, we've been focused on determining whether we built a winner or a loser by refining our data analytics capabilities. So far, the results look promising: check out this update. Alongside ask.ea, we’re also enhancing our data analytics for Slater.app. What does that mean? Over the next several months, we’ll be rolling out updates based on your feedback and user data. Stay tuned—we’ll share our...
We’re taking a break from our usual JavaScript content to share some exciting news: Edgar Allan has released a new book, How to Grow & Scale Your Business With Webflow. Created in collaboration with Webflow, this book is a must-read for anyone building a business with Webflow. Filled with insights from 3x Agency of the Year winner Edgar Allan, it’s a playbook for individuals, pro-lancers, and small agencies growing alongside the revolutionary site-building platform. For our Slater users, we...
Slater now has 7389 users. 2060 of you haven't created a file yet. 😱 These numbers got us thinking – we want to make Slater easier and more helpful to all #nocode developers.We’d love to hear from you: Did you find it challenging to get started with Slater? Are there specific areas where you could use more guidance? Do you use JavaScript often in your Webflow projects? Or is Slater your first time exploring custom code? What would help you feel more confident writing JavaScript in Slater? Are...