Update Timeline Value on Resize - ScrollTrigger

[tomekk]

Hi there,

i know, there are some other threads around which are similar to my question (or even the same) but i dont understand how i can solve this:

 

What i want is the following:

In short: curtain-Like animation -> update the timeline's inset value from the image on window.resize() to be equal to (window.width - conatiner.width)/2)

 

The first image after the first text should get an css inset left/right. On scroll the image should pin at the top and the inset should get smaller ("curtain-like"). This works like i want it to be.

 

The only thing i dont understand ist how to recalucalate the inset value on resize and update the timelines from value and/or the scrollTrigger.

I already found threads where its explained, that i should use function based values, then i should use invalidateOnRefresh on the scrolltrigger to update values. Is this correct?

Anyway i do not understand how i can handle timeline properties and scrolltrigger in the responsive way, if i need to rely on other elements on the page (e.g. width of container)

I have also added 2 screenshots to clarify my problem after resized window.
 

Hope someone can help me out here

Thanks in advance
Tomekk

 

See the Pen LYZKvQz by tomsquared_tomekk (@tomsquared_tomekk) on CodePen

[ZachSaucier]

On 11/22/2020 at 9:16 AM, tomekk said:

i should use function based values, then i should use invalidateOnRefresh on the scrolltrigger to update values. Is this correct?

Yep! With that being said, since you're using a from tween here you also need to force a re-render (invalidate doesn't always cause a re-render). You can set it up like this:

See the Pen yLJmXrZ by GreenSock (@GreenSock) on CodePen

[tomekk]

Hi ZachSaucier

thank you so much for your reply and the solution to my problem.
Yesterday, when I was reading the common scrolltrigger problems , I didn't see the mistake I made.
I think that I did fromTween mistake instead of using the fromToTween (so the scrolltrigger used the last css value before the refresh, right?)

 

With updating the progress of the timeline to the progress of the scrolltrigger, the fromtoTween is set to the beginning, when the window is resized, but the scrolltrigger isn't active. Did I understand that right as well?

 

Thank you so much, you helped me a lot and I learned something again.

Enjoy your evening,

Tomekk

[ZachSaucier]

I think you're understanding things correctly