Scrolltrigger start is not in the right place?

[Eyepatch]

Hi guys,

I've got multiple scroll triggers. One specific scroll trigger (where background gets pinned for the other one to go on top) just starts way before "top top", so it jumps to that section. https://snazzy-torrone-ef6599.netlify.app/

But if you refresh on that section the problem goes.
I've read that it might be because of dynamic content but I'm not adding anything dynamically.

I have a lot of scrolltriggers so I think it might be because of that. My code is nowhere clean. 

 

gsap.registerPlugin(ScrollTrigger);
    // parallax effect
    const panels = gsap.utils.toArray(".work-wrapper .outer");
    panels.forEach((panel, i) => {
        gsap.to(panel, {
            scrollTrigger: {
                trigger: panel,
                start: "top top", 
                pin: i === panels.length - 1 ? false : true, 
                pinSpacing: i === panels.length - 1 ? true : false,
                scrub: 1,
                invalidateOnRefresh: true,
            },
            scale: 1.2
        });
        gsap.from(panel.querySelector("h3"), {
            scrollTrigger: {
                trigger: panel,
                start: "top top", 
                pin: i === panels.length - 1 ? false : true, 
                pinSpacing: i === panels.length - 1 ? true : false,
                scrub: 1,
                invalidateOnRefresh: true,
            },
            scale: 0.9, 
        })
      });
    const tl = gsap.timeline({ease: "none"});
    tl
    .to(".display-hero .image-pill", {
        scrollTrigger: {
            trigger: ".hero-section",
            start: "top top",
            scrub: 0.5,
            invalidateOnRefresh: true,
        },
        yPercent: -150
    })
    .to(".floating-image-wrapper img", {
        scrollTrigger: {
            trigger: ".floating-image-wrapper",
            start: "top top",
            scrub: 0.5,
            invalidateOnRefresh: true,
        },
        yPercent: -200
    });
    gsap.utils.toArray(".hero-section .display-hero .text-wrap").forEach((elem, i)=>{
        tl.to(elem, {
            scrollTrigger: {
                trigger: ".hero-section",
                start: "top center",
                scrub: 0.5,
                invalidateOnRefresh: true,
            },
            xPercent: ()=>i%2 == 0 ? -10 : 10
        })
    });

    tl.to(".hero-description-wrapper", {
        scrollTrigger: {
            trigger: ".hero-section",
            start: "top top",
            scrub: 0.5,
            invalidateOnRefresh: true,
        },
        yPercent: -125
    })
    .to(".big-image-pill-wrapper", {
        scrollTrigger: {
            trigger: ".hero-section",
            start: "top top",
            scrub: 0.5,
            invalidateOnRefresh: true,
        },
        yPercent: -80
    })
    .to(".second-section .bubble-wrap", {
        scrollTrigger: {
            trigger: ".hero-section",
            start: "top top",
            scrub: 1,
            invalidateOnRefresh: true,
        },
        yPercent: -10
    })
    .to(".second-section .bubble-wrap", {
        scrollTrigger: {
            trigger: ".big-image-pill-wrapper",
            start: "center bottom",
            end: "bottom top",
            scrub: 1,
            invalidateOnRefresh: true,
        },
        y: "-40vw"
    });
    
    gsap.utils.toArray(".second-section .second-hero-wrap .display-big").forEach((elem, i)=>{
        tl.to(elem, {
            scrollTrigger: {
                trigger: ".second-section",
                start: "top 20%",
                end: "bottom center",
                scrub: 1,
                invalidateOnRefresh: true,
            },
            xPercent: ()=>i%2 == 0 ? -15 : 15
        })
    });
    

    gsap.utils.toArray(".fade-in").forEach((elem, i)=>{
        gsap.from(elem, {
            scrollTrigger: {
                trigger: elem,
                start: "top 70%",
                end: "bottom center",
            },
            duration: 0.5,
            opacity: 0,
            y: 50,
        })
    })
    gsap.utils.toArray(".fade-in-right").forEach((elem, i)=>{
        gsap.from(elem, {
            scrollTrigger: {
                trigger: elem,
                start: "top center",
                end: "bottom center",
                
            },
            ease: "power2.out",
            duration: 0.5,
            opacity: 0,
            xPercent: 25,
        })
    })
    gsap.utils.toArray(".fade-in-left").forEach((elem, i)=>{
        gsap.from(elem, {
            scrollTrigger: {
                trigger: elem,
                start: "top center",
                end: "bottom center",
            },
            ease: "power2.out",
            duration: 0.5,
            opacity: 0,
            xPercent: -30
        })
    })

I would like some help please.
Thanks in advance

[GSAP Helper]

It looks like you're definitely making one of the common mistakes with ScrollTrigger - you've put multiple ScrollTriggers inside a single timeline. That creates a logical impossibility - you cannot have the timeline's playhead AND the scrollbar's position BOTH controlling the playhead of the tween. They could be in completely different places. So you can either create separate individual tweens, each with its own ScrollTrigger (NOT nested in a timeline), -OR- you can put as many tweens as you want into a timeline and then connect the ScrollTrigger to that timeline itself. 

 

If you're still having trouble after you fix that, please provide a minimal demo where you isolate the issue as much as possible. 

 

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. 

[Eyepatch]

Okay thank you. I'll do a codepen.
But I've been trying to pinpoint the problem, and I have removed all the timeline, but the problem still persists. 
Could it come from css? The pin section isn't overflowing, neither are the elements coming before. And I noticed that it gets the correct position when I resize the page.

See the Pen LYmBjqL by eyepatch128 (@eyepatch128) on CodePen

This works on the codepen, but on the website it doesnt (start position is pushed a bit up). I couldn't recreate the problem

 

[mvaneijgen]

If you can't recreate the problem in a codepen, some external scrips might be interfering. Just disable the script/styles until the issue is no longer there and try to narrow if down from there. There is probably some CSS overwriting the styles of an element. 

[Rodrigo]

Hi,

 

As @mvaneijgen stated there's probably something else causing this.

 

When I looked in the netlify link you provided I saw that the font switched and that you have a few fonts there that have to be downloaded first. Probably when the fonts are loaded GSAP is done creating the ScrollTrigger instances and the new fonts create a layout shift. You should try in your local machine using network throttling in dev tools and check the document height and do some console logs or try some breakpoint in your code using the sources tab. On this subject also check this thread and try to see if that particular solution works in your case:

 

Finally you are using version 3.11.2, update to 3.11.3 and see if it helps.

 

Happy Tweening!

[Eyepatch]

Thank you everybody. It was like @Rodrigo said, but not quite because of the fonts. I hade image as loading="lazy", so I removed that and added defer to my script and now it works good. The only weird thing I found in this is that I have my animations run on window load, so I didn't think the issue would be from such a thing.