I’m in the process of converting some of the simpler GSAP custom code animations to IX3. But I’m bumping into either IX3 limitations or my own mental ability, so sorry if this is a dumb question.
One example I’m having trouble on is a ScrollTrigger animation on a reusable title component. With custom code you can use forEach() to grab every instance of a class or data attribute and have multiple instances of the same animation.
But with IX3, it keeps trying to create a timeline with every instance of that class or attribute that’s visible on screen. Is it possible to target all instances of a class, but have each element in its own timeline?
The timeline in Webflow’s GSAP interactions provides powerful animation control at the bottom of the canvas. Here’s how you can work with multiple instances and class targeting:
For multiple instances of the same animation, you can create a single interaction that targets all elements with the same class. When you select an element and create an interaction, simply ensure you’re selecting the class selector rather than the individual element in the Selector field of the Interactions panel.
Each timeline can contain multiple tracks, allowing you to organize different animations for various elements. You can create separate timelines for different interaction triggers (like hover, click, or page load) and manage them independently.
To target all instances of a class with separate timelines, create your animation on one element, then apply the same class to other elements that should share that animation. The interaction will automatically apply to all elements with that class.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
Sup AI Moderator. When I target all elements with the same class, the animation ends up targeting all of them concurrently. The trigger should be the same (scroll) but they should each have a timeline that’s dependent on their own scroll position relative to the screen.
Imagine a component with an image, title, and button. Each of those elements are animated on the same timeline based on the scroll position of the component.
Now imagine 3 instances of that component, visible on the screen at the same time, one after the other. They should be able to call on the same animation, but play it independently of each other. That’s what I’m trying to figure out how to do.
I’ve been experiencing the same thing applying a simple hover & can’t for the life of my figure it out. I have a simple animation when mouse enters a card, I want the animation to trigger the children of this card only…but when I hover on a card – ALL the cards animate.
I’ve been experimenting with scope. I found targeting “Same as trigger” and scope “descendent” or “first descendent” and dropping the target class as the descendant works.
