I have implemented a very simple horizontal scrolling interaction as explained in this official Webflow lesson. When I preview or publish my site, however, I’m noticing that most of the elements will “pop” in and out of view, as if they are being “de-rendered” and rendered as-needed based on their visibility. It seems to be a bit delayed, so I can see them as they do this.
I’m wondering if this is a “feature” of Webflow where items off-screen aren’t rendered until they are about to be viewed again or if this is just a peculiar bug in the way I’ve set it up. Again, I followed the tutorial as explained in the link above—to my knowledge, I don’t believe I deviated from that apart from classnames.
It appears smooth on my view and matches your video. I don’t see anything in the video with elements popping in and out of view.
The tricky part is understanding exactly how you want the design to appear. I currently see areas with images but they’re set to display=none and I don’t see any interactions applied telling these images to appear. is this the area of issue?
Apologies, I should have been a bit more explanatory.
The way the design appears (with disparate text elements, hidden images, etc.) is what I intended; I’ve simplified it for the purposes of demonstration. The issue is not with the interaction itself, but how the textual elements seem to suddenly pop in to the display when I’ve scrolled a tiny bit past them.
If you scrub through the video at ~2.7s, you can see how the “Featured work” block of text suddenly appears, despite it technically having been in the viewport before that point. I’m sorry, this isn’t very clear, but it is evident in the video if you go slow.
This may serve as a better illustration. The following images are one frame apart, but you can see how Frame 2 renders the text roughly halfway through its width, despite the viewport having moved only a few pixels:
