Jump to content
Search Community

Scale image on mouse scroll with pan effects

Keyur test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

 

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

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 ;)

 

 

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...