Jump to content
Search Community

Help needed with animation

sudarat 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 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 


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!



Link to comment
Share on other sites

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:




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.








  • Like 4
Link to comment
Share on other sites

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:



Happy tweening.



  • Like 4
Link to comment
Share on other sites

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.

  • Like 4
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...