SeamlessLoop helper function revered doesnt work

[Levin Riegner]

Hey, a quick one. When using the HorizontalLoop / SeamlessLoop (https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop) helper function, the reversed option doesnt change anything.

 

My example code:
 

// ... React useEffect code surrounding this.
const logos = logoRefs.map((ref) => ref.current);

const loop = horizontalLoop(logos, {
  reversed: true, // Doesnt work
  speed: 1, // Works
  paused: false, // Works
  repeat: -1, // Works
});

const performanceTimeline = gsap.timeline({
  scrollTrigger: {
    trigger: main.current,
    start: 'top bottom',
    end: 'bottom top',
    scrub: true,
    onEnter: () => loop.play(),
    onLeave: () => loop.pause(),
    onEnterBack: () => loop.play(),
    onLeaveBack: () => loop.pause(),
  },
});

 

Im expecting my marquee to animate to the right vs to the left which its currently doing.

 

 

 

As im writing this it turns out the timeline causing the reverse to not work - specifically the onEnter etc.Why is this effecting the ability to reverse? Im pausing for performance reasons (offscreen = paused, onScreen = play)

[mvaneijgen]

Do you have a minimal demo of your setup, because the seamlessLoop demo with reversed works fine. 

 

See the Pen OJqXzwb?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

[Levin Riegner]

I do not at the moment, but as stated before the issue is with the timeline specifically the onEnter etc events. they cause the reversed to not work

[Rodrigo]

Hi,

 

The issue is that the GSAP Timeline returned by the Seamless Loop helper is reversed when you set reversed: true in the config object. Then when you do this:

onEnter: () => loop.play(),

The play method sets the timeline's reversed state to false, so is now going forward, instead of using loop.play() use loop.reverse().

 

Here is a simple demo:

See the Pen zYbBWLd by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps.

Happy Tweening!