Jump to content
Search Community

How to animate hole React Components X and Y values with scroll

Guest
Moderator Tag

Recommended Posts

Hi, 

I am trying to animated section with scroll created as components in React.  You can find a similar effect to what I am trying to achieve here (the text on the right or the images inside the phone).

 

In my animation I would like the headingOne to appear from the bottom of the screen and fade away towards the top of the screen, followed by the headingTow that should come from the right or left followed by the cards while the section is pined and only after the animation finished the normal scrolling would begin again. 

 

Doing this I have encountered some difficulties. One of which beaning an error that says ";" expected while using the TweenLite and I don't really see why...  

Also I am not use that I used gsap correctly. For the headingOne I would like to display it none, but only after the fade away animation finishes so the headingOne would come into the middle of the screen. 

 

I would greatly appreciate is you could take a look at the code pen and point out my mistakes.

 

Thank you!

See the Pen RwQOgEe?editors=0010 by raul-rogojan (@raul-rogojan) on CodePen

Link to comment
Share on other sites

  • Guest changed the title to How to animate hole React Components X and Y values with scroll

@CodyHill I noticed several problems right away: 

  1. You're using ScrollMagic - that's very old, has been unsupported for years, and is NOT a GreenSock product. I'd strongly suggest moving to ScrollTrigger. 
  2. You're using the very old syntax that leverages TweenLite and TimelineLite which aren't needed at all anymore. Those are relics from the past - see
  3. You had multiple syntax errors. For example, you have TweenLite.fromTo(...).fromTo.(...). First of all, TweenLite.fromTo() returns a tween and there's no ".fromTo()" method of a tween. Maybe you were trying to create a timeline? But the other problem is the fromTo.() - that "." shouldn't be there. 
  4. Your project was throwing errors saying that jQuery didn't exist. 
  5. You're using React refs as the targets for the tweens which won't work. You should animate the elements, not the refs. You probably meant headingOne.current, for example, rather than headingOne.
  6. There's no need for a "css:{}" wrapper

Good luck!

Link to comment
Share on other sites

Hi, @GreenSock I have modify the code. I will encountered some issues. In particular with the react refs and the jquery error. 

 

How can I animated a hole component if not with ref? As you can see the Cards component is created using multiple card components. I would like to be able to animate them as a hole. The cards component should act like a container. 

 

I Have added jquery to the codepen but maybe I did something wrong... Does this error have another meaning?

 

Also, thank you for the answer! I

Link to comment
Share on other sites

That's more of a React issue. If you console.log(headingOne.current); right before the tween, you'll see that it's undefined. Sorry, I'm not a React guy. Find a way to feed in the appropriate element to GSAP and it'll animate whatever you want. Right now, you're animating undefined. 

 

Also, your useEffect() needs an empty Array at the end or else it will fire every time the component renders. Again, that's a React thing. You may want to read this: 

 

 

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...