ScrollTrigger Pin Transition at the same time.

[HumbleB]

I noticed that the "heading" and the "num" do not transition at the same time. You can see this when you scroll slowly. I'm not sure what it's causing this problem and how to fix it. I tried using a gsap.timeline() to get the transition to start the same time but I ended up with the same result. 

 

I also tried added scrub to '.head'

gsap.to('.head', {
  scrollTrigger: {
    pin: '.head',
    scrub: true,
    end: '+=5000s',
    pinSpacing: true,
  }
});

and removing toggleActions headings and nums but the result wasn't right

See the Pen GROwdvX by HumbleB (@HumbleB) on CodePen

Edited March 1, 2022 by HumbleB
More information

[OSUblake]

Those are different sizes, so of course they are going to be triggered at different times.

 

 

 

I'd just combine both of them, using whatever trigger you want kind of like this.

 

headings.forEach((heading, i) => {
  gsap.to([heading, nums[i]], {
    opacity: 1,
    scrollTrigger: {
      trigger: heading,
      toggleActions: 'play reverse play reverse',
      start: '+=' + `${singleDuration * i}s`,
      end: '+=' + `${singleDuration}s`,
    },
  })  
})