Trouble with initial CSS value and invalidateOnRefresh

[Garavani]

Hello,

 

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,

Stefan

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

[Cassie]

Hiya!

 

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!

[Garavani]

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!

 

Best,

Stefan

[Cassie]

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

 

 

[Garavani]

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!