How to make TweenMax Responsive

[sareer]

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

[Carl]

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:

 

http://codepen.io/GreenSock/pen/zqmMbK

 

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.

[PointC]

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:

http://greensock.com/morphsvg-update

 

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

 

Happy tweening and welcome aboard.

[sareer]

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 

[Carl]

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.

[OSUblake]

You can also recalculate the Bezier on a resize...

See the Pen ?editors=0010 by osublake (@osublake) on CodePen