_eric Posted March 5, 2022 Share Posted March 5, 2022 I have a carousel which is similar to https://www.satoshirunners.io/ under the "Satoshi Runners" section where if you scroll up and down, you can see the images are moving left and right. I managed to duplicate the functionality in my apps but when I deploy it on production, only the first row (#Track1) of the images are able to move but not for the second row (#Track2). ``` /* eslint-disable @next/next/no-img-element */ import styles from '../styles/Gallery.module.scss'; import gsap from 'gsap'; import { MutableRefObject, useEffect, useRef } from 'react'; import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'; const Gallery = () => { const el = useRef() as MutableRefObject<HTMLDivElement>; const q = gsap.utils.selector(el); useEffect(() => { gsap.registerPlugin(ScrollTrigger); gsap.to(q('#Track1'), { scrollTrigger: { trigger: '#CarouselContainer', scrub: 1, }, x: -800, }); gsap.from(q('#Track2'), { scrollTrigger: { trigger: '#CarouselContainer', scrub: 1, }, x: -800, }); }, []); return ( <div id='CarouselContainer' className={styles.container} ref={el}> <div className={styles.main}> <div className={styles.slider}> <div className={styles.slide_track} id='Track1'> <img src={Image1.src} className={styles.slide} alt='image1' /> <img src={Image2.src} className={styles.slide} alt='image2' /> <img src={Image3.src} className={styles.slide} alt='image3' /> <img src={Image4.src} className={styles.slide} alt='image4' /> <img src={Image5.src} className={styles.slide} alt='image5' /> <img src={Image6.src} className={styles.slide} alt='image6' /> <img src={Image7.src} className={styles.slide} alt='image7' /> <img src={Image8.src} className={styles.slide} alt='image8' /> </div> </div> </div> <div className={styles.main}> <div className={styles.slider2}> <div className={styles.slide_track} id='Track2'> <img src={Image1.src} className={styles.slide} alt='image1' /> <img src={Image2.src} className={styles.slide} alt='image2' /> <img src={Image3.src} className={styles.slide} alt='image3' /> <img src={Image4.src} className={styles.slide} alt='image4' /> <img src={Image5.src} className={styles.slide} alt='image5' /> <img src={Image6.src} className={styles.slide} alt='image6' /> <img src={Image7.src} className={styles.slide} alt='image7' /> <img src={Image8.src} className={styles.slide} alt='image8' /> </div> </div> </div> </div> ); }; export default Gallery; ``` Link to comment Share on other sites More sharing options...
OSUblake Posted March 5, 2022 Share Posted March 5, 2022 Welcome to the forums @_eric There is a known regression in ScrollTrigger, which is fixed in the next release, but in the meantime just add lazy: false to any .from() ScrollTrigger animations. ex: gsap.from(q('#Track2'), { lazy: false, scrollTrigger: { trigger: '#CarouselContainer', scrub: 1, }, x: -800, }); Link to comment Share on other sites More sharing options...
helersu Posted March 26, 2023 Share Posted March 26, 2023 Hi, i have a same issue here... i added lazy false into .to function but thats not gonna work on production build(next js 13.2.3). "use client"; import React, { useEffect, useLayoutEffect, useRef } from "react"; import gsap from "gsap"; const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect; let check = false; export default function AnimatedLine() { const mainSvgRef = useRef(); const line1Ref = useRef(); useIsomorphicLayoutEffect(() => { const ctx = gsap.context(() => { gsap.set("svg", { visibility: "visible", }); const lineTimeLime = gsap.timeline(); if (line1Ref.current.points.numberOfItems > 0) { lineTimeLime.to(line1Ref.current.points, { lazy: false, y: "+=60", stagger: { each: 0.009, repeat: -1, yoyo: true, }, ease: "sine.inOut", }); } lineTimeLime.timeScale(0.25); }); function createLine() { const numPoints = 80; for (let i = 0; i < numPoints; i++) { let p = line1Ref.current.points.appendItem( mainSvgRef.current.createSVGPoint() ); p.x = 0 + i * 30; p.y = 20; } } if (!check) { createLine(); check = true; } return () => ctx.revert(); }, []); return ( <div style={{ mixBlendMode: "normal", bottom: 0, marginTop: -150, marginBottom: 100, zIndex: 50, position: "relative", }} > <svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" ref={mainSvgRef}> <polyline id="poly1" ref={line1Ref} /> </svg> </div> ); } Link to comment Share on other sites More sharing options...
Cassie Posted March 26, 2023 Share Posted March 26, 2023 Hi there, what version are you on? This regression was fixed in 3.9.0 I think, we're on 3.11.5 now. You're also mentioning using lazy:false on a .to tween which was never necessary, this only affected .from tweens. There's likely something else going on here, could you maybe start a new thread with a minimal demo and a clear explanation of what your issue is? Thanks! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now