Jump to content
Search Community

Flickering when using calc

celli test
Moderator Tag

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

Link to comment
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
Link to comment
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 :)

 

 

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