[Minor issue with GSAP pinning]

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 

[Minor issue with GSAP pinning]

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


});
}

        

    };

 

[Slick Slider with GSAP]

Hello everyone, I'm using GSAP now in about a year and I'm deeply in love <3, I usually integrate it with elementor and it works perfectly 

I am working currently with a client who has very specific needs, so one of the needs was creating a slider that looks like this https://global.utexas.edu/

 

I checked the website and saw it uses a js library called Slick, anyway, I want to create something like this, and I'm not a fan of installing a plugin just for this which will cause a decrease in website speed, so... can anyone give me a hint or any example made with GSAP that I looks like the slider in the attached url , Thank you very much