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
Do you get confused when undoing (cmd + z) in Slater? We auto-format your code on save. The auto-formatting updates your code, and those updates get pushed into the undo stack. You can now improve your workflow by formatting the code when you choose—not just on save. To gain more control over when your code formats: Turn off auto-format code in the Code Editor Settings Use cmd + shift + f to format your code We added a handful of other improvements: Console logs and debuggers are now...
Last week, we announced that CSS updates were on the way—and now they're here! You can now generate CSS files just as quickly and easily as JS files. In the video below, we give a quick demo of the new functionality. If you have a Smart Script loaded in your project, you can instantly add CSS. In the demo, we also show how to add CSS in the Webflow designer. Give it a try and let us know what you're building! Community Library 🖍️ Text Highlight ColorCSS code for custom text selection. 🅰...
Do you use Slater for CSS? CSS support in Slater has always been somewhat of an afterthought—JavaScript is our love language! But sometimes, you need a simple way to add CSS to your project. Maybe you want to write a complex grid or use a CSS property that Webflow doesn't support. That's why we've decided to make CSS a first-class citizen. We considered launching the new CSS functionality today, but we want to test it a bit more. Expect it early next week. To prepare for the launch, let's...