Jump to content


How to make TweenMax Responsive

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

Hi GreenSock Guys,


I am stuck in making my TweenMax animation responsive, don't know how to make it. here it is 

Thanks as always

See the Pen ZWqmaz by sareer (@sareer) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,


Thanks for the demo. Usually when people say "responsive" they are referring to different css styles for a variety of different screen sizes using media queries.

I'm going to assume that you just mean "scalable" in that it will grow or shrink proportionally with screen size. 


The easiest way to do something like that is to use SVG for everything. Here is a great example from Elliot Geno: http://codepen.io/anon/pen/aNEvZg


Another approach would be to use left and top with percentage based values like:




resize the screen and the plane will always go back and forth full width and top to bottom full height.


You may not get as good performance with left and top as with x and y but there are no percent values for x and y in relation to the window size. You would need to recalculate your x and y values every time the screen changes size and rebuild your animation.

  • Like 4
Link to comment
Share on other sites

Hi sareer  :)


Welcome to the forums.


Carl is absolutely right about SVG being the best choice for this type of animation. It looks great at all resolutions and scales beautifully. In addition to the examples he posted, here is one I used for an answer to another forum question.


See the Pen XdVWoJ by PointC (@PointC) on CodePen


Since the path is visible, you can see exactly what's happening. Try sizing the screen and you'll see that everything works well at any screen size. That demo does use the morphSVG plugin to create the motion path and that is a Club plugin. You can experiment with it on CodePen, but to use it in the wild, you would need a Club Membership


You can also learn more about that plugin and how the MorphSVGPlugin.pathDataToBezier() method works by reading this blog post:



Hopefully that sets you on the right path.  ;)  (pun intended)


Happy tweening and welcome aboard.


  • Like 3
Link to comment
Share on other sites

Thanks Guys for such a quick and informative response. From responsive i mean on mobile devices. When i use xpercent or ypercent it effect on both desktop and mobile screen. how to code it so that it remain the same on desktop version and reduce the proportions on mobile screens.


i add but with no success 

See the Pen ZWqmaz by sareer (@sareer) on CodePen

Link to comment
Share on other sites

hmm, our demo looks the same to me.


xPercent and yPercent were not designed for this situation to make bezier points flexible. 

I really believe I gave you the best options above.

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.