Pan Images Left to Right & Right to Left on Scroll

Hi,

I am working on a preschool site and want something similar to the train (attached) to automatically pan left or right on vertical scroll in between sections. The overall effect I want is that the train is traveling down the page as users scroll down. I would also want the train to pan to its original position when scrolling up again. Please let me know if this is possible in SS through code. 

I don't have a website example to demonstrate what I am looking for so hope fully I explained it properly. I also have't started the SS site to share with you, it is a proposed animation I'd love to share with clients but want to be confident it can be achieved.

Thanks for any help.

On 8/26/2024 at 7:55 PM, katamb said:

Hi,

I am working on a preschool site and want something similar to the train (attached) to automatically pan left or right on vertical scroll in between sections. The overall effect I want is that the train is traveling down the page as users scroll down. I would also want the train to pan to its original position when scrolling up again. Please let me know if this is possible in SS through code. 

I don't have a website example to demonstrate what I am looking for so hope fully I explained it properly. I also have't started the SS site to share with you, it is a proposed animation I'd love to share with clients but want to be confident it can be achieved.

Thanks for any help.

This can be done using JS animation library such as Scroll Trigger from GSAP or ScrollMagic, these help create the scroll-driven animations on Squarespace