celli Posted December 12, 2019 Share Posted December 12, 2019 Hi, This is probably because I am using calc(100% - 60px) to express my width property and animate it with gsap, but I wonder if there is a way to still use calc or something similar without it flickering ? Or maybe there is a better way to achieve the same thing without the flickering when we click 'open' or close' See the Pen VwYjGzp by celli (@celli) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 13, 2019 Share Posted December 13, 2019 Hey celli and welcome. We don't recommend using calc like this. The reason being that with this format, GSAP can't really do the calculations in a speedy time because it just sets a string and then the browser has to calculate it after GSAP is done updating instead of GSAP just setting the correct values in the first place. It's essentially lessening the time that the calculations can happen, which isn't good. But there are several ways to do this. I recommend pre-calculating the amount that needs to be changed (and updating it on resize if necessary) and then tweening between those values. It'd be setup like so: See the Pen rNaLqqz?editors=0010 by GreenSock (@GreenSock) on CodePen P.S. Make sure you spell "duration" correctly However, if you're allowed to change the positioning and such, it might be better to use something like flexbox so that it takes care of the resizing of the other elements for you. It's probably less error prone. 2 Link to comment Share on other sites More sharing options...
OSUblake Posted December 13, 2019 Share Posted December 13, 2019 The problem is just your CSS. Don't use float. Do use flexbox. See the Pen 39f168d508e78b94d6c85768adc600aa by osublake (@osublake) on CodePen 3 Link to comment Share on other sites More sharing options...
celli Posted December 13, 2019 Author Share Posted December 13, 2019 Thanks Zach and Blake ! These are much better ways of handling this, I appreciate it. Link to comment Share on other sites More sharing options...
celli Posted December 16, 2019 Author Share Posted December 16, 2019 Hi Zach, I thought of something while re-reading and experimenting with your codePen and reply. Would using "+=20" inside of GSAP also just set a string and then the browser has to calculate it after GSAP is done updating? Like this codePen: See the Pen wvBoJLj by celli (@celli) on CodePen I do that a lot and if there is a better way / more efficient way to move something already positioned, by a set number of pixels, that would be great to know Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 16, 2019 Share Posted December 16, 2019 44 minutes ago, celli said: Would using "+=20" inside of GSAP also just set a string and then the browser has to calculate it after GSAP is done updating? No, a relative value like "+=20" makes GSAP get the current value then add to it - the browser wouldn't know what to do with a string like that. GSAP does 1 Link to comment Share on other sites More sharing options...
celli Posted December 16, 2019 Author Share Posted December 16, 2019 Thanks Zach! 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