Help needed with animation

[sudarat]

Hello everyone,

My name is Suda and i'm self taught web developer from Thailand.
I was wondering if anybody here could help me or point me to the right direction where I can learn how to do something like this 

animated model? with zoom image 

https://www.adamunderwear.com/product/bram/
 

When click the image it zoom to the side with the bigger image and with content tooltip show up. I have tried the Fancybox-master but it not the same and not working good.
Sorry I couldn't add codepen it seems the website has a problem.

Thank you very much!

Regards,

Sudarat

[Carl]

Hi Sudurat, 

 

Welcome to the GreenSock forums.

 

Its very difficult to give general advice on responsive UI animations like that without having some understanding of your level of experience and what you have tried. This is why CodePen is so helpful, it gives us a clear starting point in directing you. I think CodePen is working fine, so its probably best to give it another shot. Directions on using GSAP with CodePen can be found here:

 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

The first thing that comes to mind when seeing the site you referenced is this pen by @OSUblake 

 

Click the small squares:

 

See the Pen WwgQEV by osublake (@osublake) on CodePen

 

That isn't something a beginner is going to build out on there own very quickly and it will probably require a solid foundation of CSS / HTML / JavaScript.

Getting it to work right makes use of the FLIP (first, last, invert, play) technique which on its own requires reading a few blog posts.

The GreenSock part of it is actually quite small. 

 

I would strongly suggest you start with a very basic CodePen and get something to animate and grow when you click it. From there perhaps we can give some suggestions on what to do next or help you if you get stuck with that.

 

Unfortunately we don't have the resources to give a lot of general web development advice or walk you though building complex UI interactions. We are happy to help with any questions related to GreenSock, of course.

 

 

 

 

 

 

 

[mikel]

Hi @sudarat,

Less refined, not fully flexible and not perfectly calculated ...

 

Here just a simple starter kit:

 

See the Pen ReQqVE by mikeK (@mikeK) on CodePen

 

good luck ...

Mikel

 

 

[sudarat]

Hello everyone, thank you for your input. I went ahead and made a codepen for my code
I want the right side text to slide with the image to the right.
Also the animation of the image is not perfect.
You can find it here
 

See the Pen GYQapE by suda1991 (@suda1991) on CodePen

Hope thi

[PointC]

I'm not sure if there is a question here. Your pen is using jQuery to toggle classes and CSS transitions. Are you asking how to do the same thing with GSAP? You can toggle classes or you could just animate the x position of those elements 

 

If you're just getting started with GSAP, I'd recommend the learning section here:

https://greensock.com/learning

 

Happy tweening.

 

[sudarat]

Allright, I have identified the animation with a friend. He told me it's probably Tweenmax animation, could someone confirm? 
I will look into the learning section!
Thank you very much!

[Carl]

Yes, the site you referenced is using TweenMax. The demo @mikel gave you is a fantastic starting point... if not an end point of what you need to do. 

GSAP is an animation engine, which means you are still required to write code to tell it what to do, as such it is virtually limitless in its flexibility and complexity of use.  Its not like fancybox or some jqueryplugin that automagically takes a few DOM elements and spits out a fully functional widget or slideshow for you. 

 

Reading the getting started article should definitely help explain how it works.