Stuck on creating a temporarily sticky element

Design help Animations & Interactions
1

Hello very helpful Webflow community!

I am attempting to build a section where a graphic (a lottie animation) scrolls into view with some associated text. I would like, when the user continues to scroll, to trigger the animation to play, as well as bringing a new paragraph of text in to replace the paragraph that came in with the graphic.

I’m struggling with how to set up the elements to set myself up for a successful interaction.

It would work sort of like this, but the Three block would replace the Two block as well as triggering an animation in the One block. http://sticky-on-scroll.webflow.io

After the second paragraph becomes visible, I would like for that entire section to stop being sticky, and to resume normal scroll behavior.

Thanks for any thoughts!

4 Likes
2

@Tombo have you found a solution to this yet? I am also looking for it. Cam across this on https://asana.com/ (second section under Project Management) The problem for me right now is, that the animation stops, whenever the div is in position sticky. Seems like webflow doesn’t recognize that as “scrolling” and therefore the sync doesn’t work properly.

Any help would be much appreciated.

Cheers!

Andreas