Jump to content
Search Community

Animation not working in production but works in development - NextJS

_eric test
Moderator Tag

Recommended Posts

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

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

  • 1 year later...

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

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!

  • Like 1
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...