Jump to content


Animating the css float property. Bug?

Recommended Posts

A timeline which animates the css 'float' property shows unexpected behaviour. When seeking the timeline to an intermediate time, the style.cssText property of the animated element does not show any entry for the 'float' value.


The codepen demo  shows the effect.


Is this working as intended?

See the Pen qdJaVo by anon (@anon) on CodePen

Link to comment
Share on other sites

I might be misunderstanding your question. GSAP animates properties that accept numerical values ... float is not one of those properties.

Link to comment
Share on other sites

Hi DrMcCleod :)


float isn't a tweenable property , pls try this :


tl.set("#someText",{float:"left" , ... });
tl.to("#someText", 3, { ... , onComplete:function(){ TweenLite.set(this.target,{float:"right"}) } });
  • Like 2
Link to comment
Share on other sites

Diaco, thanks for that. By combining the onComplete event as in your example with setting the suppressEvents argument of the TimelineMax.seek method to false, I got my code working.

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.