Jump to content
Search Community

Only first component gets animated in Next.js

sagar_dev test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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!

  • Thanks 1
Link to comment
Share on other sites

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;

 

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