Timelines of scale position not getting refreshed on Resize.

[Robin Dhama]

Hello GSAP Community! Thank you so much in advance for your help!

 

I am trying to create a scaled animation on scroll. When user scroll down to section a box will appear from down to center and when it hits center of the screen then start to scale upto 1. It is working on reload window but when i resize window on this section, it suddenly beaks its scaled position.

 

All your help is greatly appreciated!

 

See the Pen mdgZMLg by dhamarobin (@dhamarobin) on CodePen

[mvaneijgen]

Hi @Robin Dhama welcome to the forum!

 

I'm not completely sure what all the code is doing in your setup. It seems fairly complicated for such a simple animation. Good to keep in mind is that all ScrollTrigger is doing is animating your animation on scroll, so I recommend first focusing on the animation at hand and only if that is correct adding ScrollTrigger.

 

Right now I've removed some of your logica and just add one timeline with one ScrollTrigger, if I resizes this logic everything works as expected. For some reason the text in the red box has disappeared? Also a good rule of thumb is that you should never animate your trigger element, in your case you animate the element box, this then can't be the trigger element, because you are moving the box the calculation ScrollTrigger needs to do will never be correct. 

 

I’ve placed some comments in your JS to better explain things, please be sure to read through them! For instance you had a gsap tween that set the box to scale: 0.3, but you can just as easily just use a .from() tween in your timeline and then the box will scale to it's initial value eg 1. Also I recommend taking a look at the ScrollTrigger docs and just read through some of the properties and what they do. As you can see there is no delay property in ScrollTrigger and also no duration. (docs https://gsap.com/docs/v3/Plugins/ScrollTrigger/). I find the following video really explains how to work with ScrollTrigger really well, and how durations work when working with ScrollTrigger

 

 

 

Hope it helps and happy tweening! 

 

See the Pen dyLBVzb?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Robin Dhama]

Hi @mvaneijgen

 

Thanks a lot for your response and suggested improvements. I really appreciate it. The codepen you improved looks really great!