Garavani Posted July 5 Share Posted July 5 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 Link to comment Share on other sites More sharing options...
Solution Cassie Posted July 5 Solution Share Posted July 5 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! 1 Link to comment Share on other sites More sharing options...
Garavani Posted July 5 Author Share Posted July 5 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 Link to comment Share on other sites More sharing options...
Cassie Posted July 5 Share Posted July 5 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 2 Link to comment Share on other sites More sharing options...
Garavani Posted July 5 Author Share Posted July 5 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now