Levin Riegner

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

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.

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 Kapture 2023-05-25 at 23.24.09.mp4

After a reinstall of NPM today, everything is now working again

The problem here is youre importing splittext, but not from the import library, it seems to work when i create it in codepen with the trial, but not with the import in my react project

Why would i use the trial in my build when i pay for greensock?

Im not sure how to recreate it outside of my react application - where do you usually import SplitText from with the business account?

Without the settimeout splittext puts single words onto different lines for some bizarre reason

Im having to run a settimeout, as for some reason, without it gsap doesnt seem to render any animations

Heres my example code: // Imports // ------------ import React, { useRef, useLayoutEffect } from 'react'; import { gsap } from 'gsap'; import { SplitText } from 'gsap/all'; // Styles // ------------ import { Jacket } from './styles'; // Component // ------------ const ScrollAnimatedText = ({ children }) => { // NOTE • refs const comp = useRef(); // NOTE • Animation useLayoutEffect(() => { let timer; let split; const ctx = gsap.context(() => { timer = setTimeout(() => { const childText = comp.current.firstChild; split = new SplitText(childText, { tag: 'span', type: 'lines,words,chars', linesClass: 'line', }); const lines = comp.current.querySelectorAll('.line'); for (const line of lines) { gsap.to(line, { ease: 'none', opacity: 1, y: `0%`, scrollTrigger: { trigger: line, start: 'top bottom', end: 'top top+=60%', scrub: true, markers: false, }, stagger: { each: 0.08, from: 'start', }, }); } }, 150); }, comp); return () => { clearTimeout(timer); ctx.revert(); }; }, []); return <Jacket ref={comp}>{children}</Jacket>; }; export default React.memo(ScrollAnimatedText);

This doesnt work for me

There is no option for "tag", Chrome is complaining that i cannot have Divs inside a <p> tag, so it need it to be a span

Okay I got it working with this code - but it doesnt make sense why this would work vs the other const Marquee = React.forwardRef((props, ref) => { const first = useRef(); const last = useRef(); useLayoutEffect(() => { const width1 = first.current.offsetWidth; const width2 = first.current.offsetWidth; const timeline1 = gsap.timeline(); const timeline2 = gsap.timeline(); timeline1.fromTo( first.current, { xPercent: 0, }, { xPercent: -100, repeat: -1, repeatRefresh: true, duration: 5, ease: 'none', } ); timeline2.fromTo( last.current, { xPercent: 0, }, { xPercent: -100, repeat: -1, repeatRefresh: true, duration: 5, ease: 'none', } ); }, []); return ( <Jacket isPaused={props.isPaused} ref={ref}> <div> <ul ref={first}> {props.text.map(({ word, uid }) => ( <li key={uid} className='el'> {word}&nbsp;–&nbsp; </li> ))} </ul> {/* Dupl */} <ul aria-hidden='true' ref={last}> {props.text.map(({ word, uid }) => ( <li className='el' key={uid}> {word}&nbsp;–&nbsp; </li> ))} </ul> </div> </Jacket> ); });

Also, even trying to set an amount of repeats has no effect - I tried 3 just to see, but it plays once only, ever.

I have created this React component which should be repeating infinitely, but it only plays once. I feel like im going insane, why is it only playing once?? const Marquee = React.forwardRef((props, ref) => { const first = useRef(); const last = useRef(); useLayoutEffect(() => { const tl = gsap.to(first.current, { xPercent: -100, repeat: -1, duration: 5, ease: 'none', repeatRefresh: true, }); const tl2 = gsap.to(last.current, { xPercent: -100, repeat: -1, duration: 5, ease: 'none', repeatRefresh: true, }); }, []); return ( <Jacket isPaused={props.isPaused} ref={ref}> <div> <ul ref={first}> {props.text.map(({ word, uid }) => ( <li key={uid} className='el'> {word}&nbsp;–&nbsp; </li> ))} </ul> {/* Dupl */} <ul aria-hidden='true' ref={last}> {props.text.map(({ word, uid }) => ( <li className='el' key={uid}> {word}&nbsp;–&nbsp; </li> ))} </ul> </div> </Jacket> ); }); For reference: https://codesandbox.io/s/divine-sun-7kksyk?file=/src/Marquee/index.jsx