Issues with scrollTrigger trigger start point

[davdev]

The start point of the element to be pinned does not match the element, the start point is way too much above the element itself. I don't mean the scroller-start and end, those ones are okay as i set them in the code but when i look at my markers the start of the pinned element is not on the element but somewhere about, which makes my scroll trigger start before it's support to. What can be the issue please  

// Create a GSAP timeline for the pinning effect
  const pinningTimeline = gsap.timeline({
    scrollTrigger: {
        trigger: ".steps-count",
        start: "top 10%",
        end: "+=10000",
        pin: true,
        markers: true,
        pinSpacing: false,
    }
});

// Your animations or timeline for the second div (div2) scroll
const scrollTimeline = gsap.timeline({
    scrollTrigger: {
        trigger: ".steps-cards-container",
        start: "top center",
        end: "bottom top",
        scrub: true,
    }
});

// Define animations for the second div
scrollTimeline.to(".steps-cards-container", {
    y: -200, // Adjust the scrolling direction as needed
    opacity: 0.5,
});

[mvaneijgen]

Hi @davdev welcome to the forum!,

 

You should never animate your trigger element! Here is a post with other common ScrollTrigger mistakes https://gsap.com/resources/st-mistakes/

// These should not be the same elment
trigger: ".steps-cards-container",
scrollTimeline.to(".steps-cards-container", {

 

If you need further assistance, please provide a minimal demo, so that we can take a look at your whole setup HTML and CSS is really important when working with GSAP.