Problems with scroll trigger

[Jameshofton]

Hi There,

I am having problems with Scroll Trigger having strange pinning behaviour, I decided to strip everything back and just go through the basics.  I removed the timeline and went back to the excellent Creative Coding Club and just wanted to test pinning which seems have some strange behaviours.  See video here

 

https://staging.oribiotech.com/pintest.mp4

 

The section jumps around and markers no longer work.  When I change the browser width, or open the inspector it usually happens.  I have made sure everything is loaded in the dom first,  also on the rest of the site I have other scroll trigger events are working , which is used for  fading in of content, they don’t use pinning though.

I am using the latest version of GSAP as well

 

 This is my code

 

<script>

document.addEventListener('DOMContentLoaded', (event) => {

 

    console.log('DOMContentLoaded');

 

    ScrollTrigger.create({

        trigger: "#pintest",

        start: "top 300px",

        end: "+=300",

        markers: true,

        pin: true,

        pinSpacing: true // set to false

    })

 

});

</script>

 

A live version of this page can also be found here

 

https://staging.oribiotech.com/pin-testing

 

I know this is only basic pinning and should be easy.  Could there be anything on the site  (its wordpress) that causes this behaviour?  Sticky heading, CSS etc

 

I really appreciate any help advice in advance

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[mvaneijgen]

Hard to say without a minimal demo, but you could check if removing style="scroll-behavior: smooth;" from your html tag fixes the issue. Otherwise I would debugging by disabling big chunks of code one by one until the issue goes away and then adding small chunks back in util the issue is back, that way you can pin point what is causing the issue. Hope it helps and happy tweening! 

[Jameshofton]

Thanks so much for pointing me in the right direction, it was the following CSS which did it

 

html,

body {

scroll-behavior: smooth;

}

 

:root {

scroll-behavior: smooth;

}