Jump to content
Search Community

ScrollTriggrer / Pin / DOM removed

Harold AO test
Moderator Tag

Recommended Posts

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

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

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 ScrollTriggerimage.thumb.png.74c904c49d6858e9f6780c8da60444d5.png But

Link to comment
Share on other sites

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 ScrollTriggerimage.thumb.png.74c904c49d6858e9f6780c8da60444d5.png 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" 

image.thumb.png.58127390a687edff344ffd544a6a89a0.png

image.png

 

Link to comment
Share on other sites

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

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 removedimage.png.484af1896f8dfdc85cc113d385408dae.png

Link to comment
Share on other sites

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:

  1. Provide a minimal demo that clearly reproduces the issue/error
  2. 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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...