update getBoundingClientRect().top onResize

[gregor]

Hi I have a problem with window resize and getBoundingClientRect().top.

 

Resizing only works if the animation has not started yet, but if the animation of the tile has started and I resize the yPos gets not updated...

I created a small demo here

 

 

any ideas what I'm doing wrong?

See the Pen LYvPJEv?editors=1010 by destroy90210 (@destroy90210) on CodePen

[Rodrigo]

Hi,

 

I think the Flip Plugin is a far better alternative in this case, saves you from all this hassle of making calculations by hand. Here is a simple demo:

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

 

Hopefully this helps.

Happy Tweening!

[GreenSock]

Flip might be very helpful, but you weren't calculating things properly in your demo - here's what I assume you were trying to do(?): 

See the Pen zYXYYKz?editors=0010 by GreenSock (@GreenSock) on CodePen

[gregor]

thank you you are my hero

and with your clever calculation, the resizing event is no longer necessary.

 

the invalidateOnRefresh: true is enough, means that the scrolltrigger already listens to resize events by default?

But I will definitely give Flip Plugin a try

[GreenSock]

11 hours ago, gregor said:

the invalidateOnRefresh: true is enough, means that the scrolltrigger already listens to resize events by default?

Yes, exactly. ScrollTrigger listens for resize events. 💪

[gregor]

Sorry to bother you again. But can I ask you if you have any idea why the calculations don't work when I add an animation to the timeline that happens before the image is resized?

See the Pen LYvPJEv?editors=1011 by destroy90210 (@destroy90210) on CodePen

 

I played around and got it to work on initial load with when I use a short setTimeout, but resizing is broken again

See the Pen oNOXNzW?editors=1011 by destroy90210 (@destroy90210) on CodePen

[gregor]

I got it somehow running. the trick was to check if the animation has started or not and use different calculations for the yPos, 

See the Pen XWQbdOv?editors=0011 by destroy90210 (@destroy90210) on CodePen

 

Not sure if this is best practise but it works