Jump to content
Search Community

Trouble with initial CSS value and invalidateOnRefresh

Garavani test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts



seems that I cannot get ahead with the invalidateOnRefresh mode.

I want my logo (red rectangle) start scaled and vertically centered and then scale down and move to the top into the header area on scroll. In my scrollTrigger timeline there are also other things that happen so I need to have that timeline.


What I achieve is the choice between 2 things both not doing exactly what I want.

invalidateOnRefresh: true does nothing. If I resize the window the centering via CSS is no longer respected (I understand that gsap overwrites and memorizes it for performance reasons).


If I add the onRefresh part (commented out in the Codepen) the resizing works centering the rectangle correctly, but then starting the scroll makes the element position wrong again. I need both, though!


Thank you in advance!

Best regards,


See the Pen oNQewvq by Garavani (@Garavani) on CodePen

Link to comment
Share on other sites

  • Solution



Thanks for the clear demo. You're just missing one little bit of the puzzle

See the Pen XWyaazO?editors=0110 by GreenSock (@GreenSock) on CodePen


Do the calculations with functional values instead of just setting it in the CSS. Then when GSAP runs refresh on resize it will run that function and update everything. Hope this helps!

  • Like 1
Link to comment
Share on other sites

Hi Cassie!


great, this works! (by the way, I wasn’t really aware of this fromTo stuff).


However I had to leave the transform: translateY(calc(50vh - 45px)) in my CSS too, otherwise on page load (as this section is the first) I had a little jump, most probably the time gsap needs to calculate the position in pixel. 


I guess this could be also resolved by doing some “init” magic with gsap, right? However with the CSS rule left in place it works perfect, so why change that?…


Thank you very much for your quick reply!




Link to comment
Share on other sites

No worries, and yeah, that's just the standard JS loading after HTML/CSS thing. You wouldn't really visually see GSAP thinking about stuff.

I'd probably handle it with opacity, I'm a little cautious of setting transforms/transitions in CSS as well as GSAP as it can cause issues. In this case it does seem fine though.


See the Pen vYQJeXJ?editors=0110 by GreenSock (@GreenSock) on CodePen



  • Like 2
Link to comment
Share on other sites

hahaha, guess you are right about the loading. This is what I meant in reality.

Also me doing usually some preloader cover or similar.


Thanks again for your quick and precise return!


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.
  • Create New...