Help Needed with infinite text marquee

[Levin Riegner]

I have an infinite marquee, that i thought was working, however it jumps at the very end slightly, im not quite sure why im wondering based on the code provided below if theres anything that looks wrong in what im doing?

 

JSX File: 

const MobileMarquee = ({ client }) => {
  // NOTE • Refs
  const main = React.useRef();
  const first = React.useRef();
  const last = React.useRef();

  React.useLayoutEffect(() => {
    const ctx = gsap.context(() => {
      // Split characters
      const split = new SplitText(first.current, {
        type: "chars",
        charsClass: "char",
      });

      // Split characters count + timing calculation
      const charsTotal = split.chars.length;
      const timingFactor = charsTotal * 0.25;

      let timeline1 = gsap.timeline();
      let timeline2 = gsap.timeline();

      timeline1.fromTo(
        first.current,
        {
          xPercent: 0,
        },
        {
          xPercent: -100,
          repeat: -1,
          duration: timingFactor,
          ease: "none",
        }
      );

      timeline2.fromTo(
        last.current,
        {
          xPercent: 0,
        },
        {
          xPercent: -100,
          repeat: -1,
          duration: timingFactor,
          ease: "none",
        }
      );
    }, main);

    return () => ctx.revert();
  }, []);

  return (
    <Jacket isPaused={isPaused} ref={main}>
      <div>
        <ul ref={first}>
          {words.map(({ word, uid }) => (
            <li key={uid} className="el">
              {word}&nbsp;–&nbsp;
            </li>
          ))}
        </ul>

        {/* Dupl */}
        <ul aria-hidden="true" ref={last}>
          {words.map(({ word, uid }) => (
            <li className="el" key={uid}>
              {word}&nbsp;–&nbsp;
            </li>
          ))}
        </ul>
      </div>
    </Jacket>
  );
};

CSS/JS:

// Imports
// ------------
import styled, { css } from "styled-components";

// Exports
// ------------
export const Jacket = styled.h1(
  (props) => css`
    position: relative;
    z-index: 3;
    overflow: hidden;
    width: 100vw;

    div {
      display: flex;
      width: fit-content;
    }

    ul {
      display: flex;
      width: fit-content;
      position: relative;
      justify-content: flex-start;
      transform: translateX(0);

      li {
        display: flex;
        align-items: center;

        font-weight: ${props.theme.font.weight.reg};
        font-family: ${props.theme.font.type.heading};
        font-size: 6rem;
        line-height: 1.2;
        color: ${props.theme.colors.brand.bc4};
        user-select: none;
        white-space: nowrap;
      }
    }
  `
);

 

 

Codesandbox Recreation:
https://codesandbox.io/s/react-hooks-example-w-clicker-t6yno?file=/src/pages/index.js

[Levin Riegner]

Interestingly after doing some searching and finding this article:

taking the ` ` out and replacing with a span with a set width fixes the marquee issue. Gsap doesnt like white-space it seems. 

 

[Rodrigo]

Hi,

 

You can also give the Horizontal Endless Loop helper function a try:

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

 

Here is a super simple example in React:

https://stackblitz.com/edit/vitejs-vite-auctqy

 

Hopefully this helps.

Happy Tweening!

[Levin Riegner]

Hey Rodrigo, the React demo you sent doesnt work - any thought son how to fix?

[Rodrigo]

Hi,

 

Just a problem with all those   there. I just added a single css class for the white space and seems to work as expected now:

https://stackblitz.com/edit/vitejs-vite-auctqy?file=src%2FApp.jsx,src%2Findex.css

 

Happy Tweening!