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).