Jump to content
GreenSock

Eugene Rayner

Position absolute breaks my animation

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

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

Link to comment
Share on other sites

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

 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

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

 

:)

  • Like 1
  • Thanks 1
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.
×