Update initial values in .from() on window resize

[Cheg]

Hey, everyone!

 

I'm trying to make responsive animation of expanding block using scrollTrigger and .from().

The problem is that the block's initial height is 100vh (for example, 100vh = 1000px), so even after resizing the window (for example, 100vh = 800px) the finish height of the block is still 1000px.

 

How can I update thie value on window resize?

 

 

See the Pen ZEdEpVa by Cheg (@Cheg) on CodePen.

[Rodrigo]

Hi,

 

Just use a fromTo instance and invalidateOnRefresh on your ScrollTrigger config:

See the Pen QWXWxvq by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps.

Happy Tweening!

[Cheg]

@Rodrigo, thank you for your reply!

 

The task was more complicated than just resizing the block to 100vh (I couldn't show the whole code), but invalidateOnRefresh: true was helpful for me.

 

Anyway, after some research I solved it by changing vars of the Tween on resize.

 

See the Pen mdZyVNN by Cheg (@Cheg) on CodePen.