Only first component gets animated in Next.js

[sagar_dev 1 Likes (Newbie)]

In my Next.js project I have one reusable component with animation applied in same component which accepts heading and sub heading and is being used multiple times across the site. The issue is only first component that is called in top of the page gets animated and any component that are being rendered after that gets reset. I want the component to get animated every time it is called.

 

https://codesandbox.io/embed/eager-shamir-vndvwp?fontsize=14&hidenavigation=1&theme=dark

[Rodrigo 5,416 Likes (Superhero)]

Hi,

 

The issue is that you're using as a trigger a class selector withou scoping it, so basically you're using all the elements with the class ".wrapper":

let tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".wrapper", // <- This gets ALL the elements with this class
    toggleActions: "restart reset restart reset",
    markers: true
  }
});

Is best to use GSAP Context's scope and/or a ref for each wrapper in order to avoid it. This seems to work the way you intend:

const Sectionheader = ({ span, head, id }) => {
  let spanRef = useRef(null);
  let headRef = useRef(null);
  const wrapper = useRef();

  useEffect(() => {
    gsap.registerPlugin(ScrollTrigger);
    const ctx = gsap.context(() => {
      let tl = gsap.timeline({
        scrollTrigger: {
          trigger: wrapper.current,
          toggleActions: "restart reset restart reset",
          markers: true
        }
      });
      tl.from(`#span-${id}`, {
        y: 30,
        opacity: 0,
        duration: 1,
        delay: 0.5,
        skewX: 3,
        ease: "power2.easeIn"
      }).from(
        `#head-${id}`,
        {
          y: 30,
          opacity: 0,
          duration: 1,
          // delay: 0.5,
          skewX: 3
        },
        +0.7
      );
    }, wrapper);
    return () => ctx.revert();
  }, []);
  return (
    <>
      <section className="wrapper" ref={wrapper}>
        <p id={`span-${id}`} ref={spanRef}>
          {span}
        </p>
        <h2 id={`head-${id}`} ref={headRef}>
          {head}
        </h2>
      </section>
    </>
  );
};

Hopefully this clear things up and thanks for the super simple demo, super easy to solve issues like this! 🥳

Happy Tweening!

[sagar_dev 1 Likes (Newbie)]

Wow, it worked. Thank You very Much. 👍

[elegantseagulls 1,443 Likes (Superhero)]

15 minutes ago, Rodrigo said:

The issue is that you're using as a trigger a class selector withou scoping it, so basically you're using all the elements with the class ".wrapper":

Beat me to it! You'll also likely be able to remove the refs for span and header. And, since all the targets are being scoped now from the wrapper ref (Thank you gsap.context!) you can add a generic class to target rather than setting a unique id for each (unless you need that elsewhere).
 

import { useRef, useEffect } from "react";

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

const Sectionheader = ({ span, head, id }) => {
  const wrapperRef = useRef()

  useEffect(() => {
    if (!wrapperRef.current) return;
    gsap.registerPlugin(ScrollTrigger);
    const ctx = gsap.context(() => {
      let tl = gsap.timeline({
        scrollTrigger: {
          trigger: wrapperRef.current,
          toggleActions: "restart reset restart reset",
          markers: true, 
          start: 'top bottom',
          end: 'bottom top'
        }
      });
      tl.from('gsap-span', {
        y: 30,
        opacity: 0,
        duration: 1,
        delay: 0.5,
        skewX: 3,
        ease: "power2.easeIn"
      }).from(
        '.gsap-head',
        {
          y: 30,
          opacity: 0,
          duration: 1,
          skewX: 3
        },
        +0.7
      );

    }, [wrapperRef.current]);

    return () => ctx.revert();
  }, []);
  return (
    <>
      <section ref={wrapperRef}>
        <p className="gsap-span">
          {span}
        </p>
        <h2 className="gsap-head" >
          {head}
        </h2>
      </section>
    </>
  );
};

export default Sectionheader;