scrolltrigger Animation with ScrollTrigger breaks when activating invalidateOnRefresh

[Ogod]

Hi everyone,

first of all I want to say thank you for this great library! It is really easy to start with it an build great effects

 

Now my question. I have setup a simple example here

Basically all images are arranged in a "gallery". The animation should move them from their calculated starting position to their target position.

The animation works really fine on scroll but when the window is resized the images are not aligned correctly anymore (x, y and scale are wrong).

 

So I tried to set invalidateOnRefresh to true and use function based values in the calculations.

But then the animations breaks:

- the opacity is completely missing

- the starting positions of the images are initially missing, they just appearing at the right position when the animation starts

after resize:

- the starting and ending positions are wrong (images are not aligned correctly)

- the animation seems to play backwards when I scroll down, so the images are animating from small to big (to their starting position) instead of big to small

 

Any ideas what is wrong with my animation and invalidateOnRefresh?

Thanks for your investigation

See the Pen abprgQp?editors=0010 by Ogod (@Ogod) on CodePen

[OSUblake]

You should probably be doing .fromTo() animations. Let's say you animate the opacity .from() 0. If that animation gets invalidated when the opacity value is at 0.5, then the new animation will only animate the opacity to 0.5 instead of 1. .from() will always animate to the whatever the value is at that point in time.

[Ogod]

Thank you very much for the hint, I switched to .fromTo() and now the animation works perfectly after a resize. As a bonus the code is a bit more comprehensible 😀