Trigger animation when specific element reaches another element

Design help Animations & Interactions
1

Hey there, I am trying to create the following:
I want a scroll-indicator (a Div that “grows” while scrolling) to hit another div and stop temporarily while triggering other animations.
The idea is this:
The scroll indicator should reach the div, this stops the site from scrolling further (remain in one section) and while scrolling further let text appear around the div (left and right). Once all text is loaded, it should grow further and scroll on to the next section, where the same thing happens. And so on. Similar to the iPhone XR website (iPhone - Apple) specifically this part:

29
292348×1398 213 KB

I want to create this on the “Influencer” page.
Can somebody help finding the right direction?
Thanks in advance!

Here is my public share link: LINK
(how to access public share link)

2

Element “reaching” another element is called collision and there’s no support of collision in Webflow IX (yet).

What you can try to define instead is an element entering the viewport or leaving the viewport. If you can determine a position when this should happen (when your objects collide), then place a dummy div, that serves as a trigger, at the right position so it leaves the screen or enters it at the same time the element collide. Depending on how your design is crafted this may not be possible, or easy.

3

Ah, good to know. Thanks for your reply, vincent! :slight_smile: