Position absolute breaks my animation

[Eugene Rayner 25 Likes (Newbie)]

Hello,

 

For some reason when I add 'position: absolute' to my 'box' class, it breaks my whole animation.

Any explanation why is greatly appreciated.

 

Cheers

See the Pen EmoXMZ by erayner (@erayner) on CodePen

[Shaun Gorneau 2,037 Likes (Superhero)]

That's because your .box has a height of 400px. Once you put absolute positioning on it, it's removed from the DOM order and its parent, which has no height, becomes a height of 0. Putting a height on .animation (of 400px) solves that issue.

 

See the Pen JNMrEV by sgorneau (@sgorneau) on CodePen

 

[Eugene Rayner 25 Likes (Newbie)]

awesome, thanks for the quick explanation

[Jonathan 5,392 Likes (Superhero)]

Hello @erayner_45092, welcome to the GreenSock Forum!

 

Also keep in mind that since your using position absolute you dont have to set a specific height on your .box if its parent already has a height defined. But at least one parent should have a height defined when any absolute children are used, like @Shaun Gorneau advised. You can just add height:100% on your .box since its out of the flow of the document and will take up the space of its parent. Especially the parent that has position relative which is what that your position absolute element (.box) is relative to.

 

CSS position property : https://developer.mozilla.org/en-US/docs/Web/CSS/position