Scale image on mouse scroll with pan effects

[Keyur 0 Likes (Newbie)]

Hello,

 

I am novice, but i really impressed with this.

I want to make product detail page having animations like this website: https://www.etq-amsterdam.com/store/product/men/low-3-timber/

 

When you click on product image, it will zoom it to full screen having pan effect. Also, when you scroll it, image will scale accordingly.

I think they are using tweenmax, but i didn't able to crack it.

 

Could you please help me with this?

 

Thanks,

Keyur

 

[GreenSock 8,117 Likes (Superhero)]

Yes indeed, they're using GSAP (TweenMax). And welcome to the forums!

 

I wish I had more time to build something for you, but we really try to keep these forums focused on GSAP-specific questions. Perhaps someone else is willing to chime in with some suggestions, but most of us don't have the resources to build something complex like that from scratch and for free. Maybe the best approach for you would be to start simple and build up from there. Feel free to post GSAP-specific questions here along the way. Typically a codepen demo with a reduced test case will give you the best chances for a solid answer. 

 

Happy tweening!

[Keyur 0 Likes (Newbie)]

19 hours ago, Keyur said:

Hello,

 

I am novice, but i really impressed with this.

I want to make product detail page having animations like this website: https://www.etq-amsterdam.com/store/product/men/low-3-timber/

 

When you click on product image, it will zoom it to full screen having pan effect. Also, when you scroll it, image will scale accordingly.

I think they are using tweenmax, but i didn't able to crack it.

 

Could you please help me with this?

 

Thanks,

Keyur

 

Hello Jack @GreenSock,

 

Glad to here from you and yes completely agreed with you.

 

FYI,

I had gone through some other questions where user had asked such direct questions and got the feedback so just asked in same way.

 

It would be great if you share your views on my basic questions:

 

1. I want to achieve that transition using TweenMax. Could you please give some hints or your valuable suggestions from where I can start the things? Like examples of Image zooming or panning using GSAP.

 

2. More I am surfing GSAP, more I am loving it. I want to make my future websites based on GSAP. Me & My team definitely want to learn and explore this. Could you please guide a way from where we can start?

 

Looking forward to your reply.

 

Thank You,

Keyur

[GreenSock 8,117 Likes (Superhero)]

1) There are many, many ways to do it (with varying complexity), but here's a very simple example: 

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

 

2) Sure, the best place to start is https://greensock.com/get-started-js/ and the learning section, https://greensock.com/learning. There are tons of tutorials online and videos. Hopefully it'll be easy to get going for you, but feel free to ask questions around here. 

 

Be careful - you may become addicted. Tween responsibly

 

 

[Keyur 0 Likes (Newbie)]

Hahaha, lol.

I'd love to be addicted.

 

Thanks Jack.