Does gsap affect z-indexes?

[NickWoodward]

Hello!

Quick question, and this could very well be me being crap with stacking contexts, but is gsap doing something unusual here?

I would have thought that setting the tbody's overflow to hidden, and setting the z-indexes of the thead and rows would have prevented the content from animating over the top of the thead. But 🤷‍♂️

I look forward to someone pointing out that I'm being an idiot 😄

See the Pen qBpPYjw?editors=1111 by nwoodward (@nwoodward) on CodePen

[OSUblake]

If you're wondering if something is a GSAP issue, remove GSAP from the equation and test it out using just CSS. 😉

 

I always add this to my CSS. It fixes so many issues.

 

* {
  position: relative;
  box-sizing: border-box;
}

 

Then try adding overflow: hidden to your table.

 

[NickWoodward]

Ah, thanks for your response - I completely lost track of this question

Unfortunately the thead in my actual project is static, and changing the position to relative causes other issues. Good advice on setting the properties on all items though. I've thought about doing that in the past, but wasn't sure if it was a good idea. Thanks.

[NickWoodward]

A hacky way of avoiding fighting the css of this table - which i don't really want to do rn - would be to make each stagger animate a distance * its index. So they all slide out from behind position 1. Might look nicer anyway. Going to give that a try