[Use ScrollTrigger Progress in Tween]

Yes, that's perfect, thanks! I figured that would add pin spacing under the element and make the section longer than I wanted, but I guess not.

 

Thanks again!

[Use ScrollTrigger Progress in Tween]

See the Pen NWmjpod by scottyak (@scottyak) on CodePen

 

Just trying to have the section title stay pinned to the top of the element while the section is in view. Is there a better way to do this?

[Use ScrollTrigger Progress in Tween]

I'd like to use the progress from a ScrollTrigger instance to update the value for a tween (in this case, pushing a title element down within a pinned element). I tried the below, I can get the progress un on Update, but I'm not sure how to apply it to the tween:

 

let el = document.querySelector(".section-title");

 

gsap.to(el, {

y: () => self.progress * (window.innerHeight * 3),

ease: 'none',

scrollTrigger: {

  trigger: ".col-left",

  start: "top top",

  end: "bottom bottom",

  onUpdate: (self) => console.log(self.progress),

  scrub: true,

}

});