Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jesper.landberg

Non scrubbed parts of a scrubbed timeline?

Recommended Posts

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 })
})


 

Link to comment
Share on other sites

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();
  }
})

 

  • Like 3
Link to comment
Share on other sites

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!

  • 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.
×