Upvote 1

Elements fade in when scroll down page

In Progress Sharkeym 4 years ago

I'm trying to get elements on the web page to fade in as you scroll down the page. I am able to get the elements to fade in, but I can't get them to stay showing as I continue to scroll - instead, they keep fading in and out.

My set up: on scroll: show; fade

Once the elements (text, images) fade in on scroll, I want them to stay put. But they continue to fade in and out when my mouse continues to scroll down the page. Ideally I should be able to set the element to set a second action to 'show' on subsequent scrolling, but I can't figure out how to do this with the given options.

Replies (3)

You just need to add a condition that will only fade in the elements when they're hidden. In the 'show' interaction, click the 'add condition' text above, and in the builder, drag one of the images you're fading in to the open space in the expression. From the dropdown that appears under the element, select 'is visible'. Then, to the left of it, drag a 'Not' logic function. We've made a quick example of this - see attached, and let me know if you have any questions about it.


Thank you for your response and for the example!!! I want to fade in both images and text. I'll see if it works on text too.

Thanks again!



It should work the same regardless. Glad our example was helpful!

Leave a Comment
Attach a file