Jump to content
Search Community

GSAP for Layout?

davidkizler 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

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 comment
Share on other sites

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! :)

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