thomask

Re: OSUblake, My problem isn't really with the skewing, but thanks for the tip with the clip path; I didn't realize support was so improved for this property. Also, I only referred to it as a webkit issue because of this stackoverflow thread. Re: Jonathon, I thought the transition: all was commented out. It was a remainder from an earlier attempt to use CSS transitions to implement the sliding motion, but it appeared very jerky when it worked at all. Good point re: the pseudo element backgrounds being fixed. I thought I had changed those to absolute. I read another of your posts on the forum that discussed stacking context, and it was really helpful, but I clearly didn't understand till now. Thanks for clearing up stacking context for me (I've been through a lot of articles trying to fix this, but they're usually very murky explanations). So, if I understand correctly, this is completely expected browser behavior. When there's no transform, the position:fixed will be interpreted in the stacking context of the root. But when I apply a transform to the .slide wrapper, the position:fixed gets interpreted in the new stacking context. So, to fix the skewed element I've got two thoughts; set the top property of the element I want fixed to the window scrollTop and update on scroll, or translate each section independently, rather than translating the wrapper. Any thoughts on which might be better? Performance or GSAP-wise?

Hi there, New to GSAP, but I'm loving the features so far. However, my current project has me in a bit of a bind. My client wants a rather unusual content slider, where each full screen slide in the slider can be scrolled to reveal further content. I thought to use GSAP to implement the transitions between the content slides, but that's where I'm stuck. I'm using ScrollMagic and GSAP to implement a pin effect within the slide, but when I transform the slide-container div, the pin disappears. I've identified this as a long-standing webkit issue where a transform creates a new coordinate system for it's child elements, so the pin is being fixed to that new system rather than the window. There are other weird issues related to the transform as well; I have a skewed element that seems to get moved downward relative to it's non-transformed self. I understand the issue, but I'm at a loss for a solution. I've tried CSS transitions, and changing positioning via classes, but they don't seem to actually generate a transition, plus access to Timeline would really simplify things for me. In the codepen example, there's a button to tween the x, which generates the transform issues, and a button to tween the left position, which generates other weird issues. I know I've got a super-niche case, but maybe others will or have run into something similar. Does anyone have any thoughts on how to approach this?