Share Posted October 19, 2014 I just recently discovered GSAP and have been so impressed by how powerful and intuitive it is. I'm wondering if anyone knows of a Javascript solution that does for CSS layout what GSAP does for CSS animation? I know this isn't considered good practice to manage layout with Javascript, but I'm just wondering if there are any good options out there. Thank you! Link to post Share on other sites
Share Posted October 19, 2014 The closest thing that comes to my mind is Bootstrap, though it sounds like you're looking for something more like templates. But to answer your question I don't think there's any equivalent to GSAP for CSS. Link to post Share on other sites
Share Posted October 20, 2014 Hello davidkizler, and welcome to the Greensock forum! Have you looked at using GSAP 1.13.0 or higher to do responsive layouts. You can try using percentage based translations.. xPercent and yPercent. Check out this blog post by GreenSock: http://greensock.com/gsap-1-13-1 And here is a cool GreenSock codepen demo example of xPercent and yPercent: See the Pen axzmb by GreenSock (@GreenSock) on CodePen Taken from the GSAP CSSPlugin Docs: To do percentage-based translation use xPercent and yPercent (added in version 1.13.0) instead of x or y which are typically px-based. Why does GSAP have special properties just for percentage-based translation? Because it allows you to COMBINE them to accomplish useful tasks, like perhaps you want to build your own "world" where everything has its origin in the very center of the world and then you move things in a px-based fashion from there - you could set xPercent and yPercent to -50 and position:"absolute" so that everything starts with their centers in the same spot, and then use x and y to move them from there. If you set x or y to a percent-based value like 50%", GSAP will recognize that and funnel that value to xPercent or yPercent appropriately as a convenience. You could also just use CSS media queries or a CSS grid framework .. but if you want to animate your responsive layout.. then xPercent and yPercent is the way to go! I hope this helps! 2 Link to post Share on other sites
Author Share Posted October 21, 2014 The xPercent and yPercent information is exactly what I was looking for! Thank you Link to post Share on other sites
Share Posted October 21, 2014 Glad to help davidkizler.. Happy Tweening! Link to post Share on other sites
