didkumi Posted January 12 Share Posted January 12 Hello, Fascinated by the library! but still a long ways to go.. For the first time, I am trying to implement a ScrollTrigger within a full page modal. (setting the scroller to the modal) When I try to pin a div, it does not stay fixed but jumps around (then eventually sets up at the fixed position) when I scroll faster or even slower. It's not visible everytime, but when you scroll up and down inside the demo, the left (pink) div jumps up and down trying to catch up with the pinned position of the scroller.. I can see the markers move up and down as well because it's pinned to a nested div... Would anyone know what is causing this behaviour and how to solve this? I would really appreciate it.. Thank you See the Pen ExMNPmo by wonjiky (@wonjiky) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted January 12 Share Posted January 12 Hi @didkumi I've set pinType: "fixed" in your example, because I think that is fine in this scenario, but ScrollTrigger changes this if it see it is scrolling something else than the body. See below from the docs https://gsap.com/docs/v3/Plugins/ScrollTrigger/. Hope it helps and happy tweening! 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). See the Pen vYPyGXN by mvaneijgen (@mvaneijgen) on CodePen Link to comment Share on other sites More sharing options...
didkumi Posted January 12 Author Share Posted January 12 Hello @mvaneijgen Thanks for your response. I also thought setting the pinType to "fixed" would solve the issue but then another problem (evident in your demo as well) arises: trigger marker is no longer triggered to the assigned container (fixed like scroller) scrolling action does not work when the mouse is over the fixed (pinned) container I could not figure out a workaround for neither of the preceding issues, especially the first since I want to add some animation in the pinned container with the triggers. Would you have an idea of a workaround? Thank you Link to comment Share on other sites More sharing options...
Rodrigo Posted January 12 Share Posted January 12 Hi, I've been fiddling with your's and Mitchel's demos for a some time and can't seem to replicate any of the issues you posted in this thread, neither this 5 hours ago, didkumi said: but when you scroll up and down inside the demo, the left (pink) div jumps up and down trying to catch up Nor this: 3 hours ago, didkumi said: trigger marker is no longer triggered to the assigned container (fixed like scroller) scrolling action does not work when the mouse is over the fixed (pinned) container I tested this on the latest chrome and firefox on Ubuntu 20 & 22. Maybe I'm missing something here 🤷♂️ Happy Tweening! Link to comment Share on other sites More sharing options...
didkumi Posted January 12 Author Share Posted January 12 Hi @Rodrigo Thank you for taking time to fiddle around with the demos. On Mitchel's demo, if you have the cursor on the pink container and try to scroll, it won't scroll because it's fixed. Also, when you scroll (while having the cursor on the right grey container), the trigger marker does not scroll up with the top of the grey box but just remains fixed... which I guess means the scroll trigger is not correctly hooked up or is disconnected when pinType is set to 'fixed'. Link to comment Share on other sites More sharing options...
Rodrigo Posted January 12 Share Posted January 12 Hi, Have you tried pinType: "transform" or pinnedContainer: ".modal" in your ScrollTrigger config. Either of that seems to fix this on the latest chrome and firefox: See the Pen LYabygV by GreenSock (@GreenSock) on CodePen Check the ScrollTrigger docs for more information about those config options: https://gsap.com/docs/v3/Plugins/ScrollTrigger/#config-object Hopefully this helps. Happy Tweening! 1 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