Jump to content
GreenSock

Giannetta

ReactJS ScrollTrigger Animation on Sections

Go to solution Solved by akapowl,

Recommended Posts

Hi all guys, I have a problem with animations with React and ScrollTrigger.

I would like the animations to start only when the section is in view and controlled by scroll zooming and rotating the text.

When I reload the page the animations are already loaded.

 

Thank you for your help.

See the Pen NWzNNjN by Giannetta (@Giannetta) on CodePen

Link to comment
Share on other sites

  • Solution

 

Hello @Giannetta - welcome to the forum.

 

10 minutes ago, Giannetta said:

I would like the animations to start only when the section is in view and controlled by scroll zooming and rotating the text.

When I reload the page the animations are already loaded.

 

That is the case because your trigger elements in vertical scroll already are at 'center center', which is your start.

 

If you want to trigger tweens in a fake horizontal scrolling scenario as such, best have a look at containerAnimation.

 

This is from the docs:

 

containerAnimation Tween | Timeline - A popular effect is to create horizontally-moving sections that are tied to vertical scrolling but since that horizontal movement isn't a native scroll, a regular ScrollTrigger can't know when, for example, an element comes into view horizontally, so you must tell ScrollTrigger to monitor the container's [horizontal] animation to know when to trigger, like containerAnimation: yourTween. See a 

See the Pen 9be5d371346765a8c9a426e8f65f1cea by GreenSock (@GreenSock) on CodePen

 and more information here. Caveats: the container's animation must use a linear ease ( ease: "none"). Also, pinning and snapping aren't available on containerAnimation-based ScrollTriggers. You should avoid animating the trigger element horizontally or if you do, just offset the start/end values according to how far you're animating the trigger. 

 

 

 

Also when working in React, you really might want to have a look at gsap.context().

 

https://greensock.com/docs/v3/GSAP/gsap.context()

 

In this pen I only included the containerAnimation part mentioned, not the .context() part. That I'll leave up to you. Hope this helps!

 

See the Pen GRGZjKy by akapowl (@akapowl) on CodePen

 

  • Like 4
Link to comment
Share on other sites

3 hours ago, akapowl said:

 

Hello @Giannetta - welcome to the forum.

 

 

That is the case because your trigger elements in vertical scroll already are at 'center center', which is your start.

 

If you want to trigger tweens in a fake horizontal scrolling scenario as such, best have a look at containerAnimation.

 

This is from the docs:

 

containerAnimation Tween | Timeline - A popular effect is to create horizontally-moving sections that are tied to vertical scrolling but since that horizontal movement isn't a native scroll, a regular ScrollTrigger can't know when, for example, an element comes into view horizontally, so you must tell ScrollTrigger to monitor the container's [horizontal] animation to know when to trigger, like containerAnimation: yourTween. See a 
 and more information here. Caveats: the container's animation must use a linear ease ( ease: "none"). Also, pinning and snapping aren't available on containerAnimation-based ScrollTriggers. You should avoid animating the trigger element horizontally or if you do, just offset the start/end values according to how far you're animating the trigger. 

 

 

 

Also when working in React, you really might want to have a look at gsap.context().

 

https://greensock.com/docs/v3/GSAP/gsap.context()

 

In this pen I only included the containerAnimation part mentioned, not the .context() part. That I'll leave up to you. Hope this helps!

 

 

 

 

See the Pen NWzNNjN by Giannetta (@Giannetta) on CodePen

 

 

hello and thanks for the quick response!

 

I tried to insert the context with React, the only thing is that I wanted to fix the element in the center and have it rotate on scroll but I read what you reported "Also, pinning and snapping aren't available on containerAnimation-based ScrollTriggers. You should avoid animating the trigger element horizontally or if you do, just offset the start/end values according to how far you're animating the trigger. "

 

How can I manage to lock the section and make it animation at scroll with Pin?

 

I tried to use  end: "+=2000"  but nothing done

 

thank you.

Link to comment
Share on other sites

 

Yup, pinning isn't possible in a scenario as such, because you are not actually scrolling horizontally, but merely animating the content to the left. Thus you'd have to adjust things animation-wise to achieve a similar effect to pinning.

 

This recent thread shows one way for that and also contains links to other approaches in other threads.

 

 

  • Like 3
Link to comment
Share on other sites

On 11/2/2022 at 6:53 PM, akapowl said:

 

Yup, pinning isn't possible in a scenario as such, because you are not actually scrolling horizontally, but merely animating the content to the left. Thus you'd have to adjust things animation-wise to achieve a similar effect to pinning.

 

This recent thread shows one way for that and also contains links to other approaches in other threads.

 

 

 

 

hi, i am here again ;)
I tried to fix the code to be able to use the pin in the horizontal fake.

I succeeded in what I wanted, but I wanted to know if what I wrote is good practice or I might have some problems going forward with the code.

thanks again!

See the Pen WNywwjx by Giannetta (@Giannetta) on CodePen

Link to comment
Share on other sites

Hi,

 

I don't see any issues in your code, is clean, simple and easy to follow.

 

Perhaps the only advice I would give you is to take advantage of GSAP Context's selectors. All you have to do is just pass the parent as scope and GSAP will look for descendants of that elements when using a selector text, that will save you from creating and storing multiple refs (refs hell).

 

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Let us know if you have more questions.

 

Happy Tweening!

  • Like 2
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.
×