Pinning and Scrolltrigger refresh not responsive

[kaii299]

I have 2 pins, one for the text and one for the phone. The pinning for the phone is not responsive. I have to reload the whole page for it to recalculate. I have tried using a timeline making the pins start together
 

I have tried adding refreshPiriority and invalidateOnRefresh. I have also tired save style Nothing works still please help 

See the Pen YzYoWRX by kaii299 (@kaii299) on CodePen

[Rodrigo]

Hi,

 

A few things. You are using ScrollTrigger MatchMedia:

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()

 

That has been deprecated in favor of GSAP MatchMedia:

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

 

You are creating a timeline outside the MatchMedia scope, it would be a good idea to either create the timeline inside the MatchMedia scope or refresh it ScrollTrigger instance in the MatchMedia callbacks, kind of like you are doing it right now, but just that particular ScrollTrigger, no need to refresh everything.

 

You have CSS transitions applied to an element with the .phone class. That could be a major issue as Jack explains here:

Finally you have several ScrollTrigger configurations inside child instances on a Timeline. That is a logical issue since you have both a Timeline and a ScrollTrigger instance battling to control the progress of those child instances. From the ScrollTrigger docs:

 

Can I have multiple nested ScrollTriggers in various child tweens in a timeline?
Technically you could but it usually doesn't make sense. An animation's playhead is controlled by its parent timeline's playhead so as it sweeps over the children it updates their playheads accordingly. However, when you assign an animation to a ScrollTrigger, it gets paused and the ScrollTrigger instance controls its playhead. It wouldn't be good to have multiple things trying to control the same animation's playhead. It's typically best to either have one ScrollTrigger control the entire timeline or use independent tween, each with their own ScrollTrigger.

 

I suggest you to correct all those things in order to clean up a little your example and see if that solves the issues you are having right now.

 

Hopefully this helps.

Happy Tweening!