Change Marquee direction on scroll

[axiome]

Hi Everyone, 

 

I'm new with Gsap and I want to make an infinite marquee, and change direction of the marquee if you scroll up or down.

I succeeded to make it from right to left, but I don't have any idea how to proceed to change direction.

 

The effect I want to reproduce is based on the Locomotive Agency website : https://locomotive.ca/fr

 

Thank you.

See the Pen abpyGQy by bappla (@bappla) on CodePen

[OSUblake]

Hi @axiome

 

You can animate the timeScale of an animation.

 

So something like this.

 

let tween = gsap.to(".marquee__part", {
  xPercent: -100, 
  repeat: -1, 
  duration: 10, 
  ease: "linear"
}).totalProgress(0.5);

...
gsap.to(tween, {
  timeScale: someCondition ? 1 : -1 // -1 will reverse the animation
});

 

 

[axiome]

Wow, it works like a charm !

Thank you for the super fast reply.