Hi, I want to do an animation like the one in this services section preview page:
When I change the target of an animation setting, it changes the targets of all the other animation settings. It drives me crazy. I cant figure out how the animation was set up in the first place. how can you manage to target different classes in one scroll in view animation?
Sry, I think it must be very easy and I feel really stupid.
The action targets feature in Webflow gives you precise control over scroll animations. To set up animations with different targets:
Select your element and go to the Interactions panel
Create a âScroll into viewâ trigger
Set up your animation actions
Select all actions in the animation timeline (hold Command/Control and click all timeline actions)
Use the âAffectâ dropdown to specify targets - you can choose âClassâ and then further refine to target only children, siblings, or parents with that class
This allows you to create precise animations where different elements can be targeted independently within the same scroll interaction.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
I was not sure where you have setup a similar layout in your site, so couldnât offer screenshots of your page for reference.
But the reference site that you shared is using a Scroll interaction which is set for the Hero Section element and affects the Cards Wrapper position. You can find this when you open the Hero component in the page under âInteractionsâ tab while the âInteractions with GSAPâ is selected as highlighted below:
ah f*ck, i got it. i have to right klick the setting, chooseâchange targetâ and klick! o n the div in the Navigator. when choosen the class in the animation setup it changes the class for all settingsâŚ