Gonzalillo

Small tweak on the code Cool, so the flickering thing got solved by setting the default css to a position where you cannot see the wave on screen. And for some reason I dont like too much to see the "+=8" string, so I used the delay property instead and it worked the same. But the core mechanism is still the one you proposed

One last thing though. Do you how to avoid the wave flickering for a ms at the beginning? When it first renders you can see it at y:0 and then disapperas

jesus christ spray me with your holy blood! that's exactly what I was trying to achieve man! So you managed to do this by setting the scrollTrigger to the timeline instead of setting it on the individual tweens. When you use duration inside of a scrubbed context the duration now refers to units of physical distance? That would be the reason for the 1, 1, 8 durations behaving as 10%, 10%, 80% scroll distance? I can not stress how helpful you've been. I didn't know people were that active here. Quite cool

Yeah, it works. But it is pretty similar to my example. The problem I had was when setting scrub to a number (1,2,3) if I were to scroll fast to the bottom of the page the wave would pop up aoas (when at the bottom of the screen it was supposed to hide again)

This is the site: https://beach.zarate.team/ I solved the glitching behaviour of the fast scrolling (it would show the wave when ouside of the triggers area) by setting scrub: true instead of scrub: *number*. The scrub delay was the one making gsap not react on time I guess.

Good night friends, I'm new to GSAP but have been experimenting with it a little bit and found myself against an intangible wall. What am I trying to do? Expected behaviour: You are scrolling down, at a certain moment a scrub starts and at the bottom of the viewport a wave starts to come up. The wave settles there at the bottom, and you can see it moving up and down (like the sea would). If you keep scrolling down, the wave should scrub down again and disappear. If you scroll up the wave scrubs up again, moves up and down, if you keep scrolling up it scrubs down. I've been trying to do this and I got some progress but I feel like I am not doing it the correct way. For the up and down, sea style animation, I used a gsap.to() with repeat, and with the triggerActions I got it to work only when on viewport. And for the first and second scrub I used gsap.fromTo(), and it worked, sort of. But... when I would scroll fast the animation would break. And that led me to realize that I am not doing this thing the right way. I may be just typing unnecesary code cause I don't know the precise mechanisms I need. How would you approach something similar? The animations are (afaik): - scrub (image arises from the bottom) - sea like animation - scrub (image sinks to the bottom) This should work scrolling down and scrolling up again (THE CODEPEN ONLY HAS THE 2 SCRUBS, IN THE CODEPEN THEY WORK FINE BECAUSE IT ISNT AN IMAGE, AND THE SCROLL IS TOO SHORT, BUT ON A NORMAL HEIGHT SCREEN IT GLITCHES. IS THIS THE MOST PERFORMANT WAY TO DO WHAT I AM TRYING TO DO?)