Setting up an element to scale-up, pin, then to scale-down.

[kevin.dev]

Hey, I am running into some confusion in trying to set-up an animation. I have a div that I want to scale up to 100%, then pin for some scrolling, and to finally scale down.

 

I have it close, but the issue I am running into is having it pin, then after some scrolling having it scale down. I seem to get stuck between having it not pin at all and scale-down immediately or have it pin, and when it comes time to scale-down, it jumps and does not look good.

I think it is stemming from the start/end points of the 2nd and 3rd ScrollTriggers. Perhaps, the element position is changing so the start/end points become stale. I tried to use ScrollTrigger.refresh() to address this in onLeave or onEnter options but that did not seem to help. 

I am questioning if this is the correct way to set this up and how I should be approaching the start/end points for my triggers.

(I am using react so the codepen is pretty close, I think it accurately, displays my issue).

See the Pen VwNqBNw?editors=0110 by kevin-fcb (@kevin-fcb) on CodePen

[mvaneijgen]

Hi @kevin.dev welcome to the forum!

 

By default GSAP renders all the logic it needs on page load and because you're targeting the same element multiple times they all get the same start point en thus will not flow like you want to. What you can do is in your later tweens set immediateRender: false, so that they will wait until it is needed to calculate their animations.

 

Personally for such a simple animation I would create one timeline with one ScrollTrigger, this is much easier to debug and maintain in the future. 

 

I've also tweaked the logic a bit. There is no need for a .fromTo(), the default scale of an element is 1, so setting .from() 0.75 will automatically scale to 1, if you use a timeline it will see in the next tween it is 1 and then animate .to() 0.75. Also if you want to have scale in both direction, you can just set scale. I've add two ScrollTrigger because from your question I get you want the pin to happen later then the scale up, so one handles the scale and the other the animation. In the animation I've add a pause twen for 1 second where the animation does nothing, to me this looks good, but be sure to tweak it if you want. 

Check out this tutorial how to work with ScrollTrigger if you want some more tips! Hope it helps and happy tweening! 

 

 

 

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