Jump to content
GreenSock

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

Smoothing out flexbox?

Recommended Posts

Here is an animated "wordcloud-ish meets bubblechart-esque" data viz exercise attempting to replace heavy packing algorithms, d3.js, etc. with some short, simple, sweet GSAP and exploit CSS3 flex-box's flex-wrap.

 

The idea is to allow a fixed collection of words to grow/shrink (coming from a stream of PubNub "votes") in place without overlapping. Essentially nudging/hugging their neighbors but maintaining the overall position.

 

For my needs it's working beautifully, until a "line-break" occurs. Curious to know if any of you might have ideas for smoothing out the "jump" when a word needs to hop onto the next line?  Or perhaps I'm missing something easy by incorporating GSAP's split text.

See the Pen pen by team (@team) on CodePen

Link to comment
Share on other sites

Thanks for the demo. Pretty cool.

 

Sorry, I just don't know flex-box all that well. However, my guess is that it isn't trivial to predict how / when linebreaks will happen and then smoothly force a transition that will override the natural behavior of flex-box.

 

Someone else may have some ideas. Wish I had better news for you. 

Link to comment
Share on other sites

From what i see the issue is not with the flex box, but with the animating of the font-size property. Even with autoRound:false applied to each tween that animates font-size, I still saw that the browser would animate font-size on a sub-pixel level and was still blocky. But that is expected since font-size cant push the element onto its own rendering layer to the GPU for smooth buttery goodness.

 

If you animated with scale, x and y you would get a smoother animation. Font-size will always cause re-layout calculations and not a very smooth animation:

 

Both CSS font-size and flex-box properties trigger layout to be calculated which is why it is not smooth.

 

font-size: https://csstriggers.com/font-size

  • Changing font-size alters the geometry of the element. That means that it may affect the position or size of other elements on the page, both of which require the browser to perform layout operations. Once those layout operations have completed any damaged pixels will need to be painted and the page must then be composited together.

Which goes the same for the rest of the following flex-box properties

 

flex-basis: https://csstriggers.com/flex-basis

flex-direction: https://csstriggers.com/flex-direction

flex-grow: https://csstriggers.com/flex-grow

flex-shrink: https://csstriggers.com/flex-shrink

flex-wrap: https://csstriggers.com/flex-wrap

 

When animating if you always want to make sure that your animation is smooth.. stick to only animating transforms and opacity. Those properties do not trigger geometry calculations and do not require a page re-layout and a repaint. which are expensive operations for the browser to do on every frame.

 

:)

  • Like 1
Link to comment
Share on other sites

Jonathan, thanks for the detailed explanation of the rendering and repaint going on behind the scenes. In Chrome I am ...so close... but I see now where my plan to hijack flex-box is gonna force me to "Write some code"

 

Though I gotta say GSAP never fails to amaze me

  • Like 1
Link to comment
Share on other sites

It's possible to animate flexbox properties with a little work...

See the Pen dMLQJr?editors=0010 by osublake (@osublake) on CodePen

 

That is based on a technique that I call relative animations. Here are some simple demos that use that technique.

See the Pen JYwRMa by osublake (@osublake) on CodePen

See the Pen eJGrPN by osublake (@osublake) on CodePen

See the Pen QjQGBa by osublake (@osublake) on CodePen

 

And a visual demonstration of what's going on...

See the Pen gavGdL by osublake (@osublake) on CodePen

 

And here's an advanced version of that technique animating text...

See the Pen mepBam?editors=0010 by osublake (@osublake) on CodePen

 

Animating the x and y position of an element is pretty easy, however, width and height are not. It requires nesting elements, and detecting changes. I just copied most of the code from the first demo I linked to and added it to your example. When you click the change button, it changes the font-size of the parent node, and triggers the layout animations. 

 

A simple demonstration of what you were asking. The jitter is due to what Jonathan explained above. Font-size just doesn't animate that well. Scaling from the largest font-size would be a much better approach.

See the Pen c6e891ec62778a19ffcfa3c0ce0dad58?editors=0010 by osublake (@osublake) on CodePen

 

.

  • Like 6
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.
×