So I have made a character walk on screen via scroll by stacking the images and using show and hide on divs when scrolling. Unfortunately, I can only make my divs 5vh in height or it goes too fast but the problem I am experiencing is that when the div reaches the top of the page it redos the animation so I end up with multiple images showing or I think that is what happens.
Is there any way to make the interaction via a div not trigger when it hits the top? Is there some code I could implement or anything?
Please read this article. I don’t have the time to walk you through all the steps you need to take to achieve what you’re trying, but I really think you should learn how to use the Page Scroll Animation. It’s gonna make things so much easier compared to what you’ve been doing.
The problem here is that you’re using the element as a trigger for your animation, and not the page itself. When you go to the interactions panel, you have 2 options: Element trigger and page trigger. I would use the page as a trigger for the animation you’re trying to achieve instead of the element. Keep in my mind that this is a relatively complex animation, so it will take you some time to get a nice result.
Oh I just realised, I didn’t use the page trigger because I couldn’t show or hide the image… hence why I used the element trigger. This was because the opacity was not full disappearing after each animation if you understand me. And I couldn’t get it working with when page is scrolled, can’t quite remember why but I did try a few other ways before this one
Instead of using the opacity to change the visibility of an element, I recommend you using the hide/show options available when creating an animation. It’s at the bottom of the pop-up.
