FarhanSU

Thank you! I am going to try them. I figured the [] would store the animation but later I learned that goes on the end of the useEffect function.

Hello! I am new to GSAP and React and I am struggling to find out how to use Scroll Trigger in GSAP v.3.3.4 in my react components. I have tried to do this in react hooks and with Class components but it does not work and spits out an warning saying TypeError: Window.getComputedStyle: Argument 1 is not an object.. I have attached the hook code and also the error that it results in . Apologies I do not have a codepen for my codes. I would appreciate any advices/help! Thank you!! My Hooks Code is: import React, { useRef, useEffect} from 'react'; import Layout from '../components/Layout' import {gsap} from "gsap"; import { ScrollTrigger } from 'gsap/ScrollTrigger'; import '../assets/styles/pages.scss'; gsap.registerPlugin(ScrollTrigger); const Gallery = () => { const purpleRef = useRef([]); const pRef = useRef([]); useEffect(() =>{ var tl = gsap.timeline({ scrollTrigger: { trigger: purpleRef, scrub: true, pin: true, start: "top top", end: "+=100%" } }); tl.from(pRef.current, {scale: 0.3, rotation:45, autoAlpha: 0, ease: "power2"}) .to(purpleRef.current, {backgroundColor: "#28a92b"}, 0); }) return ( <> <Layout> <section class="purple" ref={purpleRef}> <p ref={purpleRef} >This panel gets pinned in a similar way, and has a more involved animation that's wrapped in a timeline, fading the background color and animating the transforms of the paragraph in addition to the line, all synced with the scroll position perfectly.</p> </section> </Layout> </> ); }; export default Gallery; I used ScrollTrigger Scrub Animation demo (The purple panel) as an inspiration which I found on this code pen: https://codepen.io/GreenSock/pen/WNvVOWw