Scrolltrigger instance altering start position of next instance.

[jcdev]

Hello, I've been working at this for a while and can't seem to sort out the issue.  I have a two column grid with side by side images.  Within that container, I have an element (initially positioned absolute and out of view) that slides up on scroll, and the text above it slides up as well.  As these elements slide up, the start marker for the next scroll trigger that I'm trying to animate below it slides up as well instead of staying fixed to the top of the image.  

At this point, the start marker for the next scroll trigger is roughly 540px above where it should be.  Once it reaches the starting point, the page jumps back up to the original pinned content and scrolls the desired 700px. 

I apologize for not including a codepen, and I know that it's hard to accurately diagnose the problem without seeing all of the code, but I guess I'm just looking for a more general answer on how / why this issue would happen.  Below are the three scroll triggers in question.  Thanks in advance.  
 

      gsap.to(".ss1-copy-initial", {
        y: -80,
        scrollTrigger: {
          trigger: ".ss1-img1",
          start: "top 15%",
          end: "bottom center",
          scrub: true,
          toggleActions: "restart none none none",
          pin: ".journal-container",
          pinSpacing: true,
          markers: true,
        },
      });

      gsap.to(".ss1-slide", {
        y: -530,
        scrollTrigger: {
          trigger: ".ss1-img1",
          start: "top 15%",
          end: "bottom center",
          scrub: true,
          toggleActions: "restart none none none",
          pin: ".journal-container",
          pinSpacing: true,
          markers: true,
        },
      });

      // SCROLL SECTION 2
      gsap.to(".ss2-copy-left-slide", {
        y: -700,
        scrollTrigger: {
          trigger: ".scroll-section__2",
          start: "top 15%",
          end: "bottom center",
          scrub: true,
          toggleActions: "restart none none none",
          pin: ".journal-container",
          markers: true,
          pinSpacing: true,
        },
      });

 

[GreenSock]

Welcome to the forums, @jcdev. Yeah, I wish I could discern the problem just by looking at your isolated code but it’s almost impossible. Sorry. If you need some help, please provide a minimal demo and we’d be happy to take a peek. 

 

Make sure you’re creating your ScrollTriggers in the order they’d appear on the page.