Pinned section with scrollTrigger Not working properly

[kamranimtiaaz]

Hi Everyone,
 

I'm running into an issue with an overlay panel in a demo I've created. When you scroll down to the overlay-panel, the trigger starts as expected. However, I'm trying to translate a child element by -100%, but the animation doesn't behave as it should.

Although I've set the end value to "bottom top," the animation seems to lag behind the overlay panel. I've experimented with viewport height, dynamic values, and fixed values, but I can't get the timeline and the overlay to sync up properly.

Since I have scrub enabled, the animation should take the defined time to move from point A to B, but it’s moving much faster than expected.

Does anyone have any ideas on how to fix this or what might be going wrong?

Here is quick loom of the issue:
https://www.loom.com/share/2163b75d6aed464f997fe9bb17cc5781?sid=416f5ae5-3491-459e-aa77-544356d6fbac

 

CodePen Link:

Thanks,
Kamran

See the Pen KKjOzeg by kamranimtiaaz (@kamranimtiaaz) on CodePen.

[Rodrigo]

Hi,

 

Everything is working as expected here, maybe I'm missing something obvious but, how should this work? 🤷‍♂️

 

Can you clarify and be more specific about what should happen and post a url of a site that works the way you intend?