Harold AO Posted July 5, 2022 Share Posted July 5, 2022 Hi.  I want to use ScrollTrigger to pin the images on the left side but the left part is immediately fired by ScrollTrigger (idk why👀)  (I quickly pasted my code from Shopify on Codepen)  The error I have in my console See the Pen poLjmQB?editors=1010 by haroldao (@haroldao) on CodePen Link to comment Share on other sites More sharing options...
elegantseagulls Posted July 5, 2022 Share Posted July 5, 2022 Your codepen has JS and CSS in the HTML section. When I pull that code out, it seems to work just fine for me. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted July 5, 2022 Share Posted July 5, 2022 Yeah, @elegantseagulls is right. And your code is referencing Swiper but you didn't load that file.  Also, you referenced endTrigger: "product__wrapper" (no such thing); I think you meant endTrigger: ".product__wrapper", but you can eliminate that line altogether because your endTrigger is identical to your trigger. The trigger is used by default for both the start and end, so it's pointless to define it as the endTrigger too.  Also make sure you're loading the latest version of GSAP and ScrollTrigger. If you still need some help, please provide a minimal demo that clearly shows the issue and we'd be happy to take a peek. I wasn't able to see the error in the console in your CodePen demo. Link to comment Share on other sites More sharing options...
Harold AO Posted July 5, 2022 Author Share Posted July 5, 2022 27 minutes ago, GreenSock said: Yeah, @elegantseagulls is right. And your code is referencing Swiper but you didn't load that file.  Also, you referenced endTrigger: "product__wrapper" (no such thing); I think you meant endTrigger: ".product__wrapper", but you can eliminate that line altogether because your endTrigger is identical to your trigger. The trigger is used by default for both the start and end, so it's pointless to define it as the endTrigger too.  Also make sure you're loading the latest version of GSAP and ScrollTrigger. If you still need some help, please provide a minimal demo that clearly shows the issue and we'd be happy to take a peek. I wasn't able to see the error in the console in your CodePen demo. Here is a temp link to the Shopify website : https://6mz35le1e8kcfiqc-40246673574.shopifypreview.com/products/natz-the Link to comment Share on other sites More sharing options...
Harold AO Posted July 5, 2022 Author Share Posted July 5, 2022 29 minutes ago, GreenSock said: Yeah, @elegantseagulls is right. And your code is referencing Swiper but you didn't load that file.  Also, you referenced endTrigger: "product__wrapper" (no such thing); I think you meant endTrigger: ".product__wrapper", but you can eliminate that line altogether because your endTrigger is identical to your trigger. The trigger is used by default for both the start and end, so it's pointless to define it as the endTrigger too.  Also make sure you're loading the latest version of GSAP and ScrollTrigger. If you still need some help, please provide a minimal demo that clearly shows the issue and we'd be happy to take a peek. I wasn't able to see the error in the console in your CodePen demo. Got it ... I removed it. But I still have the issue... All the nodes under .products-image__wrapper are removed by ScrollTrigger But Link to comment Share on other sites More sharing options...
Harold AO Posted July 5, 2022 Author Share Posted July 5, 2022 4 minutes ago, Harold AO said: Got it ... I removed it. But I still have the issue... All the nodes under .products-image__wrapper are removed by ScrollTrigger But The JS is under global.js. The only error I have in my console is "ScrollTrigger.min.js:10 Uncaught TypeError: r.revert is not a function"  Link to comment Share on other sites More sharing options...
GreenSock Posted July 5, 2022 Share Posted July 5, 2022 Sorry, it's just not feasible to troubleshoot a live site with well over 2000 lines of code. Can you please provide a minimal demo, perhaps in CodePen that clearly illustrates the problem? Also, I noticed you've got pinReparent: true - does the error go away if you set that to false? Link to comment Share on other sites More sharing options...
Harold AO Posted July 5, 2022 Author Share Posted July 5, 2022 6 minutes ago, GreenSock said: Sorry, it's just not feasible to troubleshoot a live site with well over 2000 lines of code. Can you please provide a minimal demo, perhaps in CodePen that clearly illustrates the problem? Also, I noticed you've got pinReparent: true - does the error go away if you set that to false? No. It doesn't 😕 Link to comment Share on other sites More sharing options...
Harold AO Posted July 5, 2022 Author Share Posted July 5, 2022 10 minutes ago, GreenSock said: Sorry, it's just not feasible to troubleshoot a live site with well over 2000 lines of code. Can you please provide a minimal demo, perhaps in CodePen that clearly illustrates the problem? Also, I noticed you've got pinReparent: true - does the error go away if you set that to false? Btw... I updated the codepen... (I added Swiper).  And if you inspect the element, you can also see that all the content inside product-images__wrapper is removed Link to comment Share on other sites More sharing options...
GreenSock Posted July 5, 2022 Share Posted July 5, 2022 15 minutes ago, Harold AO said: Btw... I updated the codepen... (I added Swiper).   Thanks, but your CodePen doesn't reproduce the error you're asking about (or am I missing something?)  You'll significantly increase your chances of getting a solution if you: Provide a minimal demo that clearly reproduces the issue/error Don't include so much code - currently you've got over 1000 lines of HTML/CSS/JS to dig through. When troubleshooting, the best strategy is to isolate, isolate, isolate. Start with a few colored <div> elements and slowly build up from there. As for it removing the images in the DOM, I think you might just be mistaking the wrapping of your pinned element in a pin-spacer <div> for it removing things completely. I'm also not familiar with Swiper or how it might be manipulating the DOM in ways that might interfere(?) Link to comment Share on other sites More sharing options...
elegantseagulls Posted July 6, 2022 Share Posted July 6, 2022 17 hours ago, Harold AO said: you can also see that all the content inside product-images__wrapper is removed I think this is because you are using pinReparent, which is moving that content to a new location to avoid issues with fixed-position context. 2 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