Hi there! I hope someone can help me out. I’m quite new to Webflow interactions.
I’ve been requested to do an interaction, which seems simple enough, but I can’t wrap my head around it.
- It has a sticky title which appears in the middle of the screen.
- On scroll, body text appears from the underneath.
- When the body text reaches the title (distance needs to be maintained of 42px), then both title and body-text should scroll up and get out of the view.
I figured out how to scroll the body-text and set the title on the initial “mid-screen” position. However, I can’t seem to figure out how to “align” the title with the body-text, when the body text approaches the title, and let them all start moving up together from that point on. I’ve added the screenshots to hopefully illustrate the desired interaction.
Could anyone tell me what I’m missing here? I’d much appreciate this! Thanks!
Initial view:
“Meeting point” view:
Scrolling up together, until the body-text ends:
Here is my public share link: Webflow - African Face, Colonial Tongue