Non scrubbed parts of a scrubbed timeline?

[jesper.landberg]

Hi,

 

Trying out ScrollTrigger, which seems awesome. Testing out pinning atm and works great. Just wondering in what way you would recommend doing non-scrubbed tweens in a scrubbed timeline, like:
 

const tl = gsap.timeline({
	scrollTrigger: {
      	// Pin true and other stuff
      	scrub: true
    }
})
.to(otherElem, { yPercent: -100 })
.to(elem, { alpha: 1 }) // Non scrubbed

 

Currently I tried doing the below, but not sure how I would approach when it goes in reverse direction

 

const tl = gsap.timeline({
	scrollTrigger: {
      	// Pin true and other stuff
      	scrub: true
    }
})
.to(otherElem, { yPercent: -100 })
.add(() => {
	gsap.to(elem, { alpha: 0 })
})

 

[ZachSaucier]

Hey Jesper. In the above case it would make sense to use the onLeave and onEnterBack callbacks to fire tweens:
 

const endAnim = gsap.to(elem, { alpha: 0, paused: true });
const tl = gsap.timeline({
  scrollTrigger: {
    // Pin true and other stuff
    scrub: true,
    onLeave: () => endAnim.play(),
    onEnterBack: () => endAnim.reverse()
  }
})
.to(otherElem, { yPercent: -100 })

If you need to do it mid animation you could use a .call() but then you'd have to add conditional logic for the direction inside of the function. Maybe in the onUpdate of the ScrollTrigger you get the direction then use that in your callback:

const endAnim = gsap.to(elem, { alpha: 0, paused: true });
let direction = 1;
function getDir(self) {
  direction = self.direction;
}

// in the ScrollTrigger vars
onUpdate: getDir

// add the .call
tl.call(() => {
  if(direction > 0) {
    endAnim.play();
  } else {
    endAnim.reverse();
  }
})

 

[jesper.landberg]

2 minutes ago, ZachSaucier said:

Hey Jesper. In the above case it would make sense to use the onLeave and onEnterBack callbacks to fire tweens:
 

const endAnim = gsap.to(elem, { alpha: 0, paused: true });
const tl = gsap.timeline({
  scrollTrigger: {
    // Pin true and other stuff
    scrub: true,
    onLeave: () => endAnim.play(),
    onEnterBack: () => endAnim.reverse()
  }
})
.to(otherElem, { yPercent: -100 })

If you need to do it mid animation you could use a .call() but then you'd have to add conditional logic for the direction inside of the function. Maybe in the onUpdate of the ScrollTrigger you get the direction then use that in your callback:

const endAnim = gsap.to(elem, { alpha: 0, paused: true });
let direction = 1;
function getDir(self) {
  direction = self.direction;
}

// in the ScrollTrigger vars
onUpdate: getDir

// add the .call
tl.call(() => {
  if(direction > 0) {
    endAnim.play();
  } else {
    endAnim.reverse();
  }
})

 

 

Thanks @ZachSaucier, the direction one fits my needs, thx!