Jump to content


Animation with ScrollTrigger breaks when activating invalidateOnRefresh

Go to solution Solved by OSUblake,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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.

  • Like 3
Link to comment
Share on other sites

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 😀

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.