Share Posted April 29, 2016 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 More sharing options...
Share Posted April 29, 2016 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. 4 Link to comment Share on other sites More sharing options...
Share Posted April 29, 2016 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. 3 Link to comment Share on other sites More sharing options...
Author Share Posted April 29, 2016 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 More sharing options...
Share Posted April 30, 2016 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 More sharing options...
Share Posted May 1, 2016 You can also recalculate the Bezier on a resize... See the Pen yYaQar by osublake (@osublake) on CodePen 3 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now