I’m building scroll-triggered animations on my site using Webflow’s new GSAP UI and running into a frustrating issue.
I want to apply a single animation to a class and have each instance of that class animate individually when it enters the viewport — similar to how a forEach loop would behave in custom GSAP code.
However, when I apply the animation to the class, every instance animates at once as soon as the first one scrolls into view. I’ve tried using different scope settings (children, siblings, descendants, etc.), and even custom selectors with attributes, but nothing seems to isolate the animation per element.
My goal is to reuse one animation setup throughout my site, while ensuring each instance is only triggered when it becomes visible.
Has anyone successfully achieved this in the GSAP UI without writing custom JS?
Could you elaborate more on the solution? I haven’t managed to solve it. Where do you select descendants, is it on the trigger scope or on the target scope or on both? I’m trying to animate an element (class) inside a card every time the card scrolls into view, but no matter what settings I choose, every time a new card appears on screen, the animation is triggered on all cards.
Thanks! It actually helped a lot. Is it just me or does this implementation feels kind of awkward? Setting scopes both for triggers and for targets and not being able to select classes feels counterintuitive.
