[ReactJS ScrollTrigger Animation on Sections]

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

[ReactJS ScrollTrigger Animation on Sections]

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!

 

 

 

 

 

 

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.

[ReactJS ScrollTrigger Animation on Sections]

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