DannyR Posted February 10, 2022 Share Posted February 10, 2022 Is there a way to achieve this without pinReparent? Due to the design of the site there isn't any way around having a pinned container as a child of a container that is previously pinned. Because the first container is pinned it ends up having transform, which then breaks the position: fixed of the child pinned container. See the Pen JjONZBK by dannyuk1982 (@dannyuk1982) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted February 10, 2022 Share Posted February 10, 2022 Welcome to the forums @DannyR Have you tried setting the pin type on the child? pinType: "transform" Quote 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). Link to comment Share on other sites More sharing options...
DannyR Posted February 11, 2022 Author Share Posted February 11, 2022 That does seem to work - cheers Edit: although on the real world solution, it bobs up/down with scrolling - fine on the CodePen though. I guess that's always going to be the case when not using fixed? Link to comment Share on other sites More sharing options...
OSUblake Posted February 11, 2022 Share Posted February 11, 2022 5 hours ago, DannyR said: Edit: although on the real world solution, it bobs up/down with scrolling - fine on the CodePen though. I guess that's always going to be the case when not using fixed? Yeah, because scrolling happens on a different thread, it's can easily get out sync. You might be able to fix that using some type of smooth scrolling with the scrollerProxy. 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