Jump to content
Search Community

ScrollTrigger, keep pinned element in place while fading out

jaripp test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...