Start animation on begin to exit. Finish on bottom entrance...?

Design help Animations & Interactions
1

IX2 continues to make me feel like it is either 0% intuitive or I am 100% stupid.

How in the world do I set a scroll animation to begin when the top of Section 1 reaches the top of the screen, and complete when the bottom of Section 1 reaches the bottom of the screen?

All I can do right now is get it to work by setting offsets, but those are % based and don’t help AT ALL except when I set them to whatever specific window height I am currently working at. That is obviously useless for this, as any change in window height then breaks the animation.

1 Like
2

Hello @Cricitem

Can you share your read only link?

Piter :webflow_heart:

3

I recreated it in a simplified form because the concept is universal.

What I WANT is for the white block to begin to shrink when you scroll down, and be 0px height when you reach the bottom.

https://preview.webflow.com/preview/kinda-hate-ix2?utm_source=kinda-hate-ix2&preview=c265901be20f0f44b3e0810da636b539

4

Page trigger won’t work because there are sections before/after the one that contains the element I want to animate.

5

Ah yes, this gave me hard time as well.

As far as I can tell there i no way to do what you need to do. Honestly, it is impossible to start “while scrolling in view” animation when the section hits the top of the screen and finish when it’s bottom hits the bottom of the screen. It literally should be the situation for “start animation when element is fully visible and stop when it starts exiting” but it just won’t fire. And I have no idea why.

Will happily watch out for someone else to find an answer to this.

6

It’s just such a basic thing that I refuse to believe it can’t be done.

It’s the same exact concept as side scrolling, I just can’t find the tutorial for that and I NEVER got that to actually work correctly.

7

Is this something similar to the effect you’re trying to create > https://www.useloom.com/share/248eef269c6349a6b6a02ca5a0c3a5ee

8

No that’s pretty much just a page trigger. I need the white box to hit zero when Section 2 starts entering the screen.

1 Like
9

What about this > https://www.useloom.com/share/c9ecfa8f98d3419b9449ccd08fa6d94e Using your interaction just tweaking a little

10

You’re coming up against the same challenge I’ve been.

The height of the white box needs to hit 0px before you see Section 2.

11

Is moving the keyframe an option?

12

New screen record :smile: https://www.useloom.com/share/0422ee1f734442c49b83e8015dc5a9dd

13

Change the height of your screen and see what happens.

14

Happens what we don’t want to happen :smile: Maaaan

15

The problem is forcing me into an approach that may end up working out, but it’s seriously annoying.

https://webtac.webflow.io/webtac-democratizing-the-web

I’m going to collapse/expand each section as the next on is reached, so the animations can be done as page scrolls.

16

I made something using % everywhere I can and works when I change the height of my screen > https://www.useloom.com/share/d06633ed4be642b58061fce0c4ddc9cf

Not sure if this is the best way

17

It sure looks like you may have gotten it. Could you show the percentage settings you went with?

18

Yes, let me record them. The only thing I’m thinking is the text because right now section two has % too. The body has a 100% because section two need to be a % of something.

19

Here’s a screen record with the % values https://www.useloom.com/share/0fc8246eaeb644fea04064c4b6e9fa6e

20

Ohhhhhh, I see what you mean as far as using percentages everywhere.

Unfortunately that only really works with empty divs and no content. Once you get into variable heights and whatnot it’s all broken again.

It’s a really annoying problem.