How to keep same animation on different page heights

Design help General
1

Hi,
I’m building a new portfolio and I did a small logo animation where it shrinks from the full name to just 2 letters.
I used “While page is scrolling” type of anim so that it would move back to it’s original state when I come back to the Hero Section.

Now my problem is that everytime I add some new elements on my page, I need to tweak the animation keyframe as the lenght of the page is different.
It’s especially gonna be an issue as I will have some CMS pages with different Height.

Basically, what I would want is that after the first section which is 100VH the animation plays and that when I scroll back up into the first section it revert.
Can I do that using something else than “While page is scrolling”? I tried to use a “Scroll into view” anim but I can only make it work one way.

I’ll drop a link to the project as it’ll be much easier to understand : https://preview.webflow.com/preview/portfolio-2018-3362e7?preview=ba3800f8271980bdfc1392b62632c0ab

2

Hi @MoinardColin

In this case I would suggest to change the animation that instead of being in the whole page to be an element trigger that once the ‘hero section’ is in view the logo is the full version and when the hero section disappears the logo shrinks.

I hope this makes sense.

1 Like
3

That’s perfect ! I was doing it the wrong way by putting the effect on the next section.
Thanks a lot for :slight_smile:

1 Like
4

I’m glad it could help. :smiley:

5

I’m glad to find you
کارتن خالی
خرید کارتن