How to only have the interaction play once and not again upon user srcolling up the page

I’ve got a slide interaction playing out on two elements, but when the user scrolls back up the page, it’s playing again, what’s the best way to stop this. so it doesn’t play again.

When it’s animating out, it also has this stutter effect, is that something I’m designing / coding or an issue with playing animations scrolling up a page?

Sadly, the animations / interactions tutorial never explained in detail how the scroll-out of view works ;(

@vincent [ Hate to ask you, but I just read you giving an awesome piece of advice around the on-scroll interactivity on another post, if you could Sir :] thanks

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

Hey @LvnLife

Using a the “Scroll into view” element trigger for the interaction should result in the animation only happening once time.

Do not use “While scrolling in view (continuous)” trigger and make sure to leave the scrolled out of view action empty.

This should give you the one time animate in effect. Hope that helps.


Worked like a charm, thanks @matthewpmunger

1 Like

I went looking for “Scroll into view” but it only has “Time animations” which isn’t the same.

I have this section where elements slide in from bottom (via scroll into view).

But the animation is still triggered every time I scroll past them, not only once as @matthewpmunger mentioned above.

Why do the elements behave like this?

In a CMS context - I tried adding an interaction that provided a popup on an Add To Cart button.

It triggers every time you press Add To Cart - I just want to appear once on the whole website (unless you revisit the website).

It becomes incredibly annoying for end-users that it appears every time they click Add To Cart - any idea how to fix this?