â–Ľ
Streaming live at 10am (PST)

Interactions repeating

#1

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?

http://jordanportfolio.webflow.io/photo

Any help would be much appreciated, thanks. I have included the public share link, the page in question, however, is on the photo page.

p.s I know with scroll magic I could implement this better, but I don’t have the know how to do that currently.


Here is my public share link: https://preview.webflow.com/preview/jordanportfolio?utm_source=jordanportfolio&preview=a4355bfa41aba4a9d90ec9235932cca1

#2

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.

#3

Sorry? but I am using the page scroll animation hence why I have it animating?

#4

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.

1 Like
#5

Another thing that you might wanna read a little more about is a Horizontal Scroll Section. Check this project out

https://preview.webflow.com/preview/horizontal-scrolling-sticky-section?utm_medium=showcase&utm_source=horizontal-scrolling-sticky-section&preview=3a5033f942b84f4c8e23073dc9b553a1

Vincent has a well-explained tutorial on how to achieve that effect here in the forum. It’s worth your time learning it.

#6

Ah okay, thanks for the clarification. I will give that a go

#7

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

#8

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.

You can always combine both, making sure that the opacity change happens before the hide/show changes