Overwrite ScrollTrigger on click and ScrollTo

[studioalloy]

How do I overwrite scrollTrigger with an other timeline that also scrollTo the element on click, but keep the scrollTrigger alive to use the `onLeave` trigger? 

 

I have a page with videos and on scrollTrigger enter the videos should play and scale a bit (✅ working), but then when the user clicks the video should scale to 100% (❌ not working). I've set the property `overwrite: true` on the time line, but that doesn't seem to work in combination with scrollTrigger.

 

In my demo you can see an orange box that scales to 100% on click, the video tries to do the same, but is taken over by the scrollTrigger timeline which I want to overwrite. 

 

I've tried killing all the scrollTriggers, but I need the `onLeave` trigger for when the user scrolls away again, so I can scale the video back and pause the video 

See the Pen oNxqeLw by mvaneijgen (@mvaneijgen) on CodePen

[ZachSaucier]

Hey studioalloy. Why not use two ScrollTriggers? One for the pre-click stuff and one for the post-click stuff.

[studioalloy]

So, on click kill all ScrollTrigger's then scale to 100% and create a new ScrollTrigger (that does no animation). And that one has two hooks: on leave and leaveBack, that then kills it self and reinstates all previous ScrollTrigger's that where killed by the click?

 

Seems a lot more complicated than `overwrite: true`, which if it would work does everything above, but with one line of code. Why doesn't overwrite work? Are there plans to make it work in combination with ScrollTrigger?

[Dipscom]

I wouldn't go that far. I think you would still need two scrollTriggers, one for the events and one for the animations. You keep the events one for the onLeave event and anything else you need to happen whether the user has clicked or not and the rest goes into the animation scrollTrigger. This second one, you kill and create as needed depending on whether the user has clicked or not.

[studioalloy]

Took a while, but I'm back at it again. The two ScrollTriggers work, but now I want to animate back to the `scale` it was before I clicked. 

 

Right now I could set it to the max leave value (eg `scale: 0.6`), but that only works if you scroll away (down, it still pops a bit right now when the SCROLL trigger instates), but when you click on it again it also needs to `scale` back to the value it was on that scroll position.

 

Is there some 🔮 magic value I could set the `scale` to?

 

See the Pen OJbXqxd?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[ZachSaucier]

Hey studioalloy. If I'm understanding you correctly, you're wanting the ScrollTrigger to be in control of the element's scale until the element is clicked, in which case you want it to animate to the default value. Then if it's clicked again you want it to animate back to what the ScrollTrigger says it should be.

 

That's not the easiest thing because of the conflict. There's not a magic value that you could set the scale to but if you are careful with the logic it's doable.

 

Some side notes:

• You're making one of the most common GSAP mistakes: not setting your transforms of elements being animated with GSAP with GSAP itself. 
• You have multiple ScrollTriggers with the same ID. That doesn't make much sense.
• end: "+=90% center" doesn't make much sense. You can remove the += here.

I would probably have the ScrollTrigger animation affect a proxy. Then in the onUpdate of the timeline you immediately set the scale of the relevant element. That way if the element is clicked you can stop the visual updating of the element. Something like this:

See the Pen WNoxqOq?editors=0010 by GreenSock (@GreenSock) on CodePen

[studioalloy]

@ZachSaucier I want ScrollTrigger to scale the elements and on click the element should scale to 100%.

 

If I want the click 100% scale to happen I have to `.disable()` the SCROLL scrollTrigger otherwise it will overwrite the scale. Another scrollTrigger should then check if you `onLeave()` or  `onLeaveBack()`, then it should scale back to some magic value and the SCROLL trigger should enable again. In the end I also want to have a close button, with scales it back from 100% and enables the scroll animation again.

 

I've also made a screen recording explaining my issue in more detail:

and the pen

 

See the Pen LYbZwyM?editors=0110 by mvaneijgen (@mvaneijgen) on CodePen

 

Quote

Some side notes: ..

 

Fair enough, but I'll start optimising code when I got a working version.

[ZachSaucier]

Thanks for the video, that's helpful.

 

Adjusting my demo a bit to add some onLeave and onLeaveBack listeners you can get what you're wanting:

See the Pen OJbRLmj?editors=0010 by GreenSock (@GreenSock) on CodePen

[studioalloy]

Back to `overwrite:` ! That was what I was looking for! But then I don't get why my frist pen didn't work, there I had `overwrite: true` and it was in a timeline instead of straight up `gsap.to()`. I had it also `scrollTo:` the element on click, maybe that is the culprit? But I've modified your pen and everything seems to work fine. 

 

See the Pen wvozqJa?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen