Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
FarhanSU

ScrollTrigger gives an error message on React

Recommended Posts

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:

 

Errorcode(1).png

Errorcode(2).png

Errorcode(3).png

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

Link to post
Share on other sites

I'm not much of a React guy, but the error means you're passing in a reference to an element that doesn't exist. My guess is that this is the problem:

trigger: purpleRef, // BAD
  
trigger: purpleRef.current, // GOOD? 

 

  • Like 2
Link to post
Share on other sites

You're also not setting the pRef in your render function. And why are setting your refs to an array? 🤷‍♂️

const purpleRef = useRef([]);
const pRef = useRef([]);

 

  • Like 2
Link to post
Share on other sites

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.

Link to post
Share on other sites

Hello again! Unfortunately I am still struggling. There is no more error but the scrollTrigger is still not working. I stumbled on this forum:

and it is basically exactly what I am trying to do. I tried to replicate this and add a ScrollTrigger so I can pin elements. However, when the Box enters the viewpoint, it disappears. I would to know how I can set the initial opacity to 0 and it revels when you scroll to the center of the view point. And in other instances, an elements would slides in from either sides. I hope what I am asking makes sense. I also have a codepen this time:

See the Pen RwrBKVM by FarhanSU (@FarhanSU) on CodePen

 

I am also open to class components edits rather than hooks because it seems a little bit more complicated.

 

Thank you @OSUblake @GreenSock very much for your help!

Link to post
Share on other sites

There are a bunch of errors in the console, including React-specific ones. You forgot to load ScrollTrigger. I don't see anything in that CodePen at all (visually). This definitely sounds like a React question. We'd be happy to answer any GSAP-specific questions for you. Maybe someone else can chime in with React expertise - I don't really have any, sorry. 

  • Like 1
Link to post
Share on other sites

Sorry for the errors, that was my first time using codepen. And thank you very much @OSUblake. I just have one last question. Because this seems to work on codepen but however it is not working on my react environment. I made a screen recording of what I am referring to here: https://youtu.be/0R1JmgOp46Y

Any possible reason why this is not working?

Thank you once again for the help, I really appreciate it all!

12 hours ago, OSUblake said:

You can't import like that in codepen. It has to be a valid url.

 

 

 

 

Link to post
Share on other sites
18 minutes ago, FarhanSU said:

Any possible reason why this is not working?

Given we can't see the demo or the code that you've used this is a complete guess, but often times issues like that are caused by CSS issues. The best way to see what's going on is to use the Elements panel of your developer tools. 

  • Like 1
Link to post
Share on other sites
1 hour ago, ZachSaucier said:

Given we can't see the demo or the code that you've used this is a complete guess, but often times issues like that are caused by CSS issues. The best way to see what's going on is to use the Elements panel of your developer tools. 

 

Hello Zach, it is the same codepen from above:

See the Pen RwrBKVM?editors=0010 by FarhanSU (@FarhanSU) on CodePen

(I added the dependencies so It should show up visually)

Link to post
Share on other sites

I understand that, but there is obviously some difference in between the demo and your production site. It's likely a CSS issue like I said.

  • Like 1
Link to post
Share on other sites
On 7/13/2020 at 4:32 PM, ZachSaucier said:

I understand that, but there is obviously some difference in between the demo and your production site. It's likely a CSS issue like I said.

Thank you very much at @ZachSaucier. I figured out the problem with the pinning elements. There was an element that is using transform in app.css. And the pinning was resloved by settingpinReparent: true it "will be reparented to the <body> while it is actively pinned so that it can escape any ancestor containing blocks."

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

×