Zoom in effect

[JoPed]

Hi,

I'm trying to make a zoom-in effect using the ScrollTrigger. I feel like I'm almost there, but I don't like way it kinda snaps back to the default state. This happens when you scroll back down and the image is on the way out of the viewport.

How can I make that transition more smooth?

 

Minimal demo: https://codesandbox.io/s/zoom-in-effect-epv9s8

[GreenSock]

Hi @JoPed. I'm struggling to understand what you mean because your demo just uses scrub: true, so it goes "back to the default state" in exactly the reverse way as it came in. There's no "lack of smoothness" for me and I don't see any snapping either. Also...

1. Don't use transform: "translate(0) scale(1)" - that's the worst for both performance and accuracy. Just use the built-in GSAP shortcuts like scale, x, y, rotation, etc. So in your case, {x: 0, y: 0, scale: 1}. Always set the initial values via GSAP too. In your case, gsap.set("#ninja", {x: -100, xPercent: 0, scale: 0.6});
2. You definitely shouldn't be animating "transitionDuration" - using CSS transitions with GSAP is usually a very bad idea. Just use GSAP to do the animation. 

Are you trying to have it take longer to animate in/out? Maybe just alter the start/end positions? And you can use something like scrub: 1 to make the scrub take 1 second to "catch up": 

https://codesandbox.io/s/zoom-in-effect-forked-zxtbc9?file=/src/Test.js

 

I hope that helps.

[JoPed]

3 hours ago, GreenSock said:

Hi @JoPed. I'm struggling to understand what you mean because your demo just uses scrub: true, so it goes "back to the default state" in exactly the reverse way as it came in. There's no "lack of smoothness" for me and I don't see any snapping either. Also...

1. Don't use transform: "translate(0) scale(1)" - that's the worst for both performance and accuracy. Just use the built-in GSAP shortcuts like scale, x, y, rotation, etc. So in your case, {x: 0, y: 0, scale: 1}. Always set the initial values via GSAP too. In your case, gsap.set("#ninja", {x: -100, xPercent: 0, scale: 0.6});
2. You definitely shouldn't be animating "transitionDuration" - using CSS transitions with GSAP is usually a very bad idea. Just use GSAP to do the animation. 

Are you trying to have it take longer to animate in/out? Maybe just alter the start/end positions? And you can use something like scrub: 1 to make the scrub take 1 second to "catch up": 

https://codesandbox.io/s/zoom-in-effect-forked-zxtbc9?file=/src/Test.js

 

I hope that helps.

Thank you for the response.

 

Ah of course, that makes sense with the scrub. And I never knew about the CSS part. Thank you so much!

 

And to answer your question, I was trying to make the out animation not seem so jumpy (hope that makes sense?).

 

EDIT: After testing the edited codesandbox it looks much better. Again, thank you for your time!

Edited October 31, 2022 by JoPed
Edit after testing solution