Reinis Posted February 20 Share Posted February 20 Hi! I'd need to use some sticky elements on my site but the problem is, that when I use some ScrollTriggers with snapping the whole page, my position: sticky elements are broken even if they have nothing to do with other animated elements. I understand why this happens but I wonder maybe there is some known workaround to fix this. Please see the demo. Thank you! See the Pen yLwroLm by Reinis-Meulis (@Reinis-Meulis) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted February 20 Share Posted February 20 Hi, There is no need for position sticky in this particular scenario IMHO. Just use ScrollTrigger for the whole thing and be done with it. The only catch is that, since the parent element is being pinned and nested pinning is not supported (see the docs) you have to use a different type of pinning, in this case transform: pinType "fixed" | "transform" - by default, position: fixed is used for pinning only if the scroller is the <body>, otherwise transforms are used (because position: fixed won't work in various nested scenarios), but you can force ScrollTrigger to use position: fixed by setting pinType: "fixed". Typically this isn't necessary or helpful. Beware that if you set the CSS property will-change: transform, browsers treat it just like having a transform applied, breaking position: fixed elements (this is unrelated to ScrollTrigger/GSAP). Here is a for of your demo: See the Pen oNVOGem by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now