Minor issue with GSAP pinning

[bobybrars]

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,
    },


});
}

        

    };

 

[GSAP Helper]

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. 

[bobybrars]

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 

[Rodrigo]

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!