I have elements on my page, and I set up an animation using GSAP Interactions with a trigger that depends on scrolling. The animation works when I scroll, but if an element is visible on load (e.g., on a new page), it doesn’t start until I scroll. I want the animation to trigger automatically for visible elements on load and for others when scrolling. How can I achieve this with new GSAP Interactions in Webflow without code?
Hi there,
While Webflow’s native Interactions feature with GSAP integration is great for scroll-based animations, you can achieve animations for elements visible on page load using a few different approaches:
For elements that should animate immediately when the page loads, you can use Webflow’s Initial appearance settings combined with an interaction that triggers “On Page Load”. This allows you to set the starting state of your elements and animate them as soon as the page is ready.
For elements that should animate when they become visible, you can create a scroll-into-view animation with a very small offset (1% or less). This will trigger the animation as soon as any part of the element enters the viewport, creating the illusion of an automatic trigger.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
Not exactly what I need. Previously, if a text reveal animation on Scroll into View was applied to the global class .head-1, the animation would trigger correctly on all pages. But now, I understand that you have to manually assign an ID to each class and create a separate animation for each section that has the .head-1 class.