Using ScrollTrigger callbacks to change variables?

[Tony Geek]

Hi,

I've had a look around the forums to help me with this particular issue,  but I haven't seemed to be able to get anywhere with this.
I'm trying to hook myself into the callbacks of ScrolTrigger to set the Y property of an animation, I want it to do the following:
- OnEnter, fade up and in from the bottom
- OnLeave, fade up and out to the top
- OnEnterBack, fade down and in from the top
- OnLeaveBack, fade down and out from the bottom

I was going to do this by manipulating a variable in each condition, but that doesn't seem to be working very well at all, as it doesn't do anything.
I have tried using a condition check on the y variable like y: self => self.direction > 0 ? -150 : 150, but this doesn't fit my use case. I was wondering how I could achieve the desired effects by utilising the callbacks, or something else that I must be missing.

Thanks in advance!

See the Pen gOZwzNG by tonycre8-the-bold (@tonycre8-the-bold) on CodePen

[mvaneijgen]

Hi @Tony Geek 

 

I would then create all the tweens in the callbacks them self. .fromTo() tween are great for this, because then we can make sure the animations always start from the placed we want. You could of course create a function with a tween in there and call that function each time in the callbacks, but this also works. I've set overwrite: true, just as a precaution for when tweens would overlap.

 

Hope it helps and happy tweening! 

 

See the Pen ZEVpRXY?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[Tony Geek]

Lovely! Just what I was looking for!

Thanks a lot for this!