Jump to content
Search Community

How to manipulate flex values?

Eugene Rayner test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi there!

 

I am just looking into ways to animate things without using position absolute and left and right properties.

with flex I can center something in the middle of the page very easily. How would I go about animating something from right to center but not using position absolute?

 

Cheers :)

Link to comment
Share on other sites

You can't animate most flexbox values because they're words, e.g. flex-start, space-around, column-reverse. You can't say, animate to column reverse. The browser has to do the layout. But that's actually a good thing as that's one less thing you have to calculate.

 

To do a flexbox animations, start off by recording the position of your element in it's current state. Now change its flexbox style and let the browser reposition it. Now record the new position of your element. You now know where the element was, and where its supposed to be. Now move your element back to it's old position and animate it to it's new position. This all takes place in between animation frames, so you won't see the jump.

 

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

 

This technique will work for every flexbox property.

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

 

It will actually work for any type of layout that the browser handles, like the new CSS grid.

 

For more information, check out these threads.

 

  • Like 17
  • Thanks 2
Link to comment
Share on other sites

  • 1 year later...
  • 2 years later...
  • 2 years later...
Quote

I copied the code exactly, but it doesn't work.  (the boxes aren't appearing) Javascript and CSS correctly loaded, what could be wrong?  I just want to animate between flex row and flex column.  Thanks for any response!

 

Link to comment
Share on other sites

  • 3 months later...

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...