ScrollTrigger on multiple Components (React)

[Moon Sung Kil 0 Likes (Newbie)]

Hey there, I'm trying to implement a ScrollTrigger on to multiple components using React. In short, I am trying to implement it in a way where every Component rendered will have its own ScrollTrigger, but while reusing  the component it is only firing when it gets to the first component and applies the effects on all the components, I am pretty sure there is a simple way using this with react, but I can"t seem to find, if someone can help me out?

See the Pen Component.js by s (@s) on CodePen

[Moon Sung Kil 0 Likes (Newbie)]

Here is a little Example: https://codesandbox.io/s/infallible-sea-mqv24w?file=/src/App.js

[Rodrigo 4,809 Likes (Superhero)]

Hi @Moon Sung Kil and welcome to the GreenSock forums!

 

The main issue is that you're using the same selector in all the instances of your component:

secondSideInfoTL.to(".component_body", {
  duration: 0.5,
  opacity: 1
});

GSAP basically is running that tween on all the elements it finds in the DOM with that class. In the case of your example all three instances of your component. Since version 3.11 GSAP has Context to help with React related stuff and allow users to easily find elements using a specific selector in a given scope. In this case it's as simple as using this code in your component file:

import React, { useEffect, useRef } from "react";
import "./Component.css";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

function Component({ componentColor }) {
  const container = useRef();
  gsap.defaults({ ease: "none", duration: 2 });
  
  useEffect(() => {
    const ctx = gsap.context(() => {
      const secondSideInfoTL = gsap.timeline();
      secondSideInfoTL.to(".component_body", {
        duration: 0.5,
        opacity: 1
      });
  
      ScrollTrigger.create({
        animation: secondSideInfoTL,
        trigger: ".component_body",
        start: "top 20%",
        end: "+=500",
        markers: true,
        toggleActions: "play reset play reset"
      });
    }, container); // <- Scope!
    return () => ctx.revert();
  }, []);
  return (
    <div className="component" ref={container}>
      <div className={`component_body ${componentColor}`}></div>
    </div>
  );
}

Like that GSAP will only look for elements with the class ".component_body" inside that component and not the entire DOM.

Here is a live example:

https://codesandbox.io/s/vibrant-khorana-9x3j3k?file=/src/Component.js

 

Also is always a good idea to create GSAP instances inside a gsap.context() callback in order be able to revert them when the component unmounts.

 

Happy Tweening!

[Moon Sung Kil 0 Likes (Newbie)]

Thanks a lot @Rodrigo, fixed it with your help