[Scrolltrigger start is not in the right place?]

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.

[Scrolltrigger start is not in the right place?]

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

 

[Scrolltrigger start is not in the right place?]

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

[How to make sticky/parallax effect on section?]

Thank you ! That works!

[How to make sticky/parallax effect on section?]

Hi there,

I'm trying to do the same animation as this website: https://www.jomor.design/ in the work section half window scroll

I'm having trouble getting it. I couldn't figure out how he did it.
I kinda mimicked it using position sticky but I had to remove overflow-x: hidden from html & body, and it made huge horizontal scroll since i had many section overflowing.
I tried to do it with gsap but the best I can manage is what you can see on codepen.
I'm running out of ideas to try, and I'd love some tips please
Thanks in advance

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

[Swapping sections doesnt work]

Thank you
I finally got it thanks to you
(although it took me quite some time)

[Swapping sections doesnt work]

Hey guys,
I'm new to the forum so I'm not sure if this is the right place to ask
I have sections and when you click the btn you go to the next one after an animation.

 

So in the animation, i want the current section to go up with the two .shifters/layers

And then the next section follow the .shifters in one go
The problem im facing is that it appears suddenly
I can't remember what I tried but i tried everything I can think of
I tried different properties and things with gsap and css but can't figure it out

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