Need help with animated text / Classes applied but only works on the first one

Hi – after many hours of watching tutorials and trying things don’t really work yet. On the page “Speakers” I would like images to move in from the bottom, and text from the side. It works on the first one but on the other only partly and sometimes although classes are applied.

Also it would be great if after scrolling down and up again the the interaction would run again. Now it only runs once.

Here is the Link to the page and below to the project

Here is my public share link:

Hey there @kurt,
First I gotta say- I love the simple & clean design!

Now to our problem:
This is a classic case for class based animation. Your elements naming, hierarchy and structure is on the spot, so it is really easy to interact on a large scale.
Here it is:

  1. Remove all the interactions on the children elements
  2. Create 1 “large” interaction on the first ‘Div Block 7’ (could have a better class name :rofl:)
  3. Apply all scroll in and out interactions on this parent element.
  4. Trigger it by class

1 Like

Hi Aviv, thank you so much!! I am on the run, will be in the office tomorrow morning again and answer in detail! Best, Kurt

Hi Aviv, thank you for your compliment :slight_smile: And you helped me VERY much! I worked it the way you showed and I am getting there, maybe a little more tuning is needed. I applied it on two other pages (work still in progress), works nicely.
But when I tried to apply it to text within a slider, I couldn’t get it working. It only moves in the first slide. (The previews when working in the interactions section are fine). Maybe you could have a look.

Your interaction works in every slide :heart_eyes:
It is only a matter of delay, that keeps you from seeing it :sweat_smile:

1 Like

Thank you for looking, yet I don’t see it works here:
Only in Designer/interactions/preview. The text does not move in from right to left in two steps.

OK, finally I got it … thank you again :+1::ok_hand::grinning: