ScrollTrigger, keep pinned element in place while fading out

[jaripp]

Is it possible to keep pinned titles in place while fading out after ScrollTrigger end? I don't want the titles to slide under my logo.
So when the "end" is triggered, titles would just fade out in place.

See the Pen QWVQYaB by jaripp (@jaripp) on CodePen

[GreenSock]

Here's one approach: 

See the Pen YzOazaL?editors=0110 by GreenSock (@GreenSock) on CodePen

 

Just use a scrubbed timeline and put the fade toward the end using the position parameter. 

[jaripp]

Nice!! Thanks!
Is there a way to do the same without scrubbing?

[Rodrigo]

50 minutes ago, jaripp said:

Is there a way to do the same without scrubbing?

An alternative is to give scrub a small value 0.25~0.3 but, without scrubbing you get exactly what you had in the first place using ScrollTrigger's callbacks.

 

gsap.utils.toArray('.content-block').forEach((section, i) => { 
  const pretitle = section.querySelector('.pre-title');
  let tl = gsap.timeline({
    scrollTrigger: {
      trigger: section,
      start: "top 50px", 
      end: "bottom 150px",
      pin: pretitle,
      pinSpacing: false,
      scrub: 0.25
    }
  });
  tl.to(pretitle, {
    autoAlpha: 0,
    duration: 0.5
  }, 2.5)
}); 

If you want to avoid that situation you have to tie the animation to the scroll progress and that's what scrub is for. As far as I know these are kind of the two options you have.

 

Happy Tweening!