Scroll animation, pause center viewport and reverse

[runejensencom]

Hey guys

 

So the code works fine when scrolling down and reverse after center of the viewport. Is it possible to add a pause to the animation, when the viewport hits the top of the container and start reverse after scrolling 200vh? and maybe add more div animations

See the Pen QWrGzZG by rune-jensen (@rune-jensen) on CodePen

[Cassie]

Hey there!

 

Thanks for being part of club GreenSock, we appreciate the support 🥳

Have you taken a look at this video? It's super helpful.
 

 

By 'pause' the animation, are you maybe talking about pinning?

And you can set the end trigger to a certain number of pixels, or even do a little calculation if that helps?

end: "bottom 5%"

end: "+=3000px"

end: `+=${window.innerHeight * 2}px`

 

[runejensencom]

Hi Cassie

 

I took your advice and study more about GSAP and ScrollTrigger. I find a solution how to pin the element when it hits the center of the viewport, and after scrolling 200vh, it will reverse the animation just like in the demo I showed in the first post.