Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
celli

Flickering when using calc

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

  • Like 2

Share this post


Link to post
Share on other sites

Thanks Zach and Blake ! These are much better ways of handling this, I appreciate it.

Share this post


Link to post
Share on other sites

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 :)

 

 

Share this post


Link to post
Share on other sites
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 :) 

  • Like 1

Share this post


Link to post
Share on other sites

Thanks Zach! 

Share this post


Link to post
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.

×