jesper.landberg Posted July 22, 2020 Posted July 22, 2020 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 Posted July 22, 2020 Posted July 22, 2020 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(); } }) 3
jesper.landberg Posted July 22, 2020 Author Posted July 22, 2020 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! 1
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now