NO BUG: Animation triggers on scroll but fades back in unexpectedly

[typomaniac]

Hi everyone,

I’ve set up a scroll interaction using the “Enter viewport” trigger (see screenshot). Everything works as expected: the element fades out when it reaches the center of the screen, thanks to rootMargin: 0px 0px -50% 0px.

after the fadeOut completes, the element becomes visible again as I continue scrolling. I was expecting it to stay hidden after fading out.

Has anyone experienced something similar or knows how to prevent the element from becoming visible again after the animation? I already tried toggling the “Run only once” option, but that didn’t help.

Thanks in advance!

ScreenCast Jam.Dev

type or paste code here

Browser: Chrome 110
OS: macOS / Windows / Linux / etc.
URL: Link to a page that illustrates this issue
Video: Short screen recording that illustrates this issue (free tool: jam.dev)

[Please describe this bug in as much detail as possible so we can replicate & debug this bug]

[typomaniac]

Maybe a user problem ;-):
Do i need an animation End interaction, that hides the element afterwards?

[Matej]

Hi @typomaniac,

I’ll mark this as a no-bug, because what is happening here, we just run the animation, and that’s it. After the animation is completed, you have to hide the element if you don’t need it anymore, just like you said.

Please test this way and let me know.
Matej

[typomaniac]

works! Can i also set visibility to 0? Hiding results im some kind of »collapsing« due to the missing element.

[Matej]

Hi,

you can try to assign a class to it, that will set the opacity to 0. You can use “set attribute” and set it somehow like this:

Just make sure that the class exists

Let me know if this helps.

Best regards,
Matej

[typomaniac]

thank you so much! Did not know that yet

[Matej]

No problem, I’m glad it’s solved now

Matej