bobybrars Posted October 16, 2022 Share Posted October 16, 2022 Hello everyone I'm facing a minor issue with gsap pinning on scrolling with elementor, https://myaccentway.com/shop checkout this page, in the last sections after the plans tables when you scroll the sections get pinned but the right container within moves slightly to the left when scrolling you can also check the video here https://streamable.com/56zzkt and this is the code I'm using: can you please help me ? thank you function shop1() { gsap.from('.voocpic1', { scrollTrigger: { trigger: '.vooc1', start: 'top top', endTrigger:'.reviews', end:'top 30%', pin: '.voocpic1', scrub: true, pinSpacing: false, }, }); } function shop2() { gsap.from('.voocpic2', { scrollTrigger: { trigger: '.vooc2', start: 'top top', endTrigger:'.reviews', end:'top 30%', pin: '.voocpic2', scrub: true, pinSpacing: false, }, }); } function shop3() { gsap.from('.voocpic3', { scrollTrigger: { trigger: '.vooc3', start: 'top top', endTrigger:'.reviews', end:'top 30%', pin: '.voocpic3', scrub: true, pinSpacing: false, }, }); } }; Link to comment Share on other sites More sharing options...
GSAP Helper Posted October 16, 2022 Share Posted October 16, 2022 It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. Link to comment Share on other sites More sharing options...
bobybrars Posted October 16, 2022 Author Share Posted October 16, 2022 2 minutes ago, GSAP Helper said: It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. Hi, thank you for your reply, I'm actually using wordpress and elementor so that's why I had to share the website and the video , also I shared the GSAP code I integrated in the page, I hope that is useful Link to comment Share on other sites More sharing options...
Rodrigo Posted October 17, 2022 Share Posted October 17, 2022 Hi, With just the code and a video is kind of hard to pinpoint what could be the issue here. We understand that, given the tech stack you are using in your development, is difficult to share a live example, but if possible try to create a codepen that shows the problem. By going through the code and doing a quick inspection of the site the only suggestion I can give you is to use pinType transform in your ScrollTrigger configuration: gsap.to(myElement, { scrollTrigger: { pinType: "transform", /* rest of your config here */ }, }); Hopefully this helps somehow. Sorry I can't be more helpful but we are limited to what we can test and unfortunately there is not much to test. Let us know if you have any other question. 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