Animating the css float property. Bug?

[DrMcCleod 0 Likes (Newbie)]

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

[Shaun Gorneau 1,503 Likes (Superhero)]

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

[Diaco 1,948 Likes (Superhero)]

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"}) } });

[DrMcCleod 0 Likes (Newbie)]

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.