Scroll In view animation

Community resources General
1

Hello, I am trying to do a content reveal when scrolling into view animation. I’ve applied the animation to the class as I wish all the elements of the pages with the same class have the same animation, however, it worked on the first section in red but not the second one. Also works fine for the image but not the text. does that relate to the combo class that I use? But it shouldn’t right? As normally I’ve applied it to the root class. Any idea what’s the issue? Thanks a lot!

https://preview.webflow.com/preview/the-man-in-the-hat?utm_medium=preview_link&utm_source=designer&utm_content=the-man-in-the-hat&preview=2c2999410e087a100b8570e21e712a5e&workflow=preview

2

The first H1 to scroll into view is triggering all the other ones at the same time. There’s no limitation in your IX.

Try this:

  1. affect the IX to the Section, and set it on the class of it.
  2. then define actions for the elements inside, still targeting the class, and making sure to set “Only children with that class” so that when the IX fires because the section gets into view, it only affects what’s inside of it.

Should work better.

You rarely have to set the trigger of a repeatable IX on the elements that it’s going to actively animate. You want to find a “container” for them instead, even if you have to create divs just for that purpose.

When I make IXes, 90% of the time the trigger is set on a div that has just a class “trigger-something”, no style at all. Sometimes it’s a container of animated elements sometimes it sits in the flow of elements at the right triggering position.

By doing so, you can easily jump to your triggers wherever they hide in the page structure, by using the cmd/ctrl+e menu.

CleanShot 2021-06-12 at 16.50.23@2x
CleanShot 2021-06-12 at 16.50.23@2x2206×922 325 KB

BTW, to be able to jump to content in the page from the quick menu, you need to activate this option before :

CleanShot 2021-06-12 at 16.52.39@2x
CleanShot 2021-06-12 at 16.52.39@2x1718×704 195 KB

1 Like
3

Wow, I’ve never noticed that settings icon there in the quick menu. Thanks for the tip @vincent :+1:

1 Like
4

Cool! Your class naming strategy is going to change :wink:

5

@vincent Thanks for the explanation and tips! I’ve tried it but it still doesn’t work. Take the page attached as example, I have a div called section-content-container, I applied the animation and they seems to be triggered at at once still. Did I do something wrong? I also have another question related to animation, I’ve changed the header to a symbol, however, when I added it to the other page, the animations that I’ve set was all gone. Do I have to manually add all the animations back or there is a better way to do it? Thanks!

Edit: issue has been fixed! somehow it didn’t work on class but worked on interactive trigger.