Jump to content
Search Community

Help Needed with infinite text marquee

Levin Riegner test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...