Jump to content
Search Community

Animate float: left; elements when parent element is resized

twimbee 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

I want to animate left floated elements to their new position when the width property of the parent element is changed, to do this I am thinking of writing a loop to calculate the new position for every element but the browser does this already only that it does it jerky, is there a simpler way to avoid all the looping and calculation within TimelineMax ?

 

The pen I use as example almost does it but I'd like a smooth animation.

 

 

 

 

 

 

 

 

 

Cheers.

See the Pen aBzExZ by twimbee (@twimbee) on CodePen

Link to comment
Share on other sites

You can use an animation technique I call relative animations to do this. It involves a loop, but you really don't have to calculate anything because the browser does the layout for you.

 

The relative position of your floated elements are at 0,0, even when the parent element resizes. However, the absolute position of your elements will change, which would be their offsetTop and offsetLeft values. 

 

To start out, you need to save the absolute position of all your elements. When the parent resizes, all you have to do is record the new absolute position of your elements, translate them back to where they were, and then tween to their relative position of 0,0.

 

That's pretty much it!

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

 

And here's a post with a couple other examples using this technique, but for flexbox.

http://greensock.com/forums/topic/15243-smoothing-out-flexbox/?p=66155

 

.

  • Like 3
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...