Banner Animation in Loop

[panamera]

Hello everyone,

I would like to recreate this animation.
There are 2 banners that move in loop always from left to right.
See here: https://ava-digital.ru/

It would be nice that the animation could change depending on the scroll direction.
Does anyone have an idea how I can implement this?

Thanks

[OSUblake]

Welcome to the forums @panamera

 

Check out our loop helper function.

https://greensock.com/docs/v3/HelperFunctions#loop

 

Once you get that setup, you should be able to animate the direction change using ScrollTrigger.

 

Some psuedo code...

let loop = horizontalLoop(myElements, {
  paused: false,
  repeat: -1
});

ScrollTrigger.create({
  onUpdate({ direction }) {
    gsap.to(loop, {
      timeScale: direction
    });
  }
});