[ScrollTrigger gives an error message on React]

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.

[ScrollTrigger gives an error message on React]

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:

 

See the Pen WNvVOWw by GreenSock (@GreenSock) on CodePen