seamlessLoop Helper function resize overlap elements. Restart timeline but reversed does not work.

[shuamp]

Hello ,

I am working in a Nextjs project, and I want to create 3 components that have the marque animation effect. I am using the seamlessLoop helper function for that.

one of the component animation is reversed, so it moves from the left to the right.
When resizing the screen, the elements that are moving overlap, so I apply the restart() method to solve the problem, but the reversed animation component is not any longer reversed
I create some logic to detect if the animation is reversed , if so it should apply reversed() method but it does not work.

this is the link of  my demo:

import horizontalLoop from './horizontalLoop.js';
import gsap from 'gsap';
import { useGSAP } from '@gsap/react';
import { useRef } from 'react';

interface Props {
  elements: string[];
  config?: {
    repeat?: number;
    paused?: boolean;
    paddingRight?: number;
    speed?: number;
    reversed?: boolean;
  };
}

const Animation = ({ elements, config }: Props) => {
  const reference = useRef(null);
  useGSAP(
    () => {
      const elements: Element[] = gsap.utils.toArray('.element');
      const loop = horizontalLoop(elements, {
        repeat: config?.repeat || -1,
        paused: config?.paused || false,
        paddingRight: config?.paddingRight || 5,
        speed: config?.speed || 0.2,
        reversed: config?.reversed || false,
      });
      window.addEventListener('resize', () => {
        if (config?.reversed) {
          loop.restart().then(() => loop.reverse());
        } else {
          loop.restart();
        }
      });
    },
    { scope: reference }
  );

  return (
    <div ref={reference} className="container">
      {elements.map((element, index) => (
        <div key={`element-${index}`} className="element">
          {element}
        </div>
      ))}
    </div>
  );
};
export default Animation;

https://stackblitz.com/edit/stackblitz-starters-bgvams?file=app%2FAnimation.tsx

Can anybody help me with this problem? is there a better way to fix the overlapping when resizing?

Thank you in advance,

kind regards.

[shuamp]

After some thougth I got a solution to my problem. 😄

import horizontalLoop from './horizontalLoop.js';
import gsap from 'gsap';
import { useGSAP } from '@gsap/react';
import { useRef } from 'react';

interface Props {
  elements: string[];
  config?: {
    repeat?: number;
    paused?: boolean;
    paddingRight?: number;
    speed?: number;
    reversed?: boolean;
  };
}

const Animation = ({ elements, config }: Props) => {
  const reference = useRef(null);
  useGSAP(
    () => {
      const elements: Element[] = gsap.utils.toArray('.element');
      const loop = horizontalLoop(elements, {
        repeat: config?.repeat || -1,
        paused: config?.paused || false,
        paddingRight: config?.paddingRight ||50 ,
        speed: config?.speed || 0.2,
        reversed: config?.reversed || false,
      });
      window.addEventListener('resize', () => {
        if (config?.reversed) {
          loop.restart().then(() => loop.reverse());
        } else {
          loop.restart();
        }
      });
      if (config?.reversed === true) loop.eventCallback("onUpdate", () => {loop.reverse()})
    },
    { scope: reference }
  );

  return (
    <div ref={reference} className="container">
      {elements.map((element, index) => (
        <div key={`element-${index}`} className="element">
          {element}
        </div>
      ))}
    </div>
  );
};
export default Animation;

I just added a condition to check if the timeline is reverse outside of window.addEventListener to check if the timeline has a reverse condition to reverse on update. This may help someone that encontered a similar problem. I hope this help.