Jump to content


Coordinate system using percentages?

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'm just beginning to get my head wrapped around a project which involves porting some of my Flash applications (built with TweenMax) over to javascript.  


I'm trying to understand what the best practice is for translating a fixed-coordinate system (Flash) to a flexible / multiple-resolution environment. (HTML).


My Flash applications all run at full screen, so in order to simply account for all mobile environments, I assume that one simply creates a "screen sized" DIV set at height/width 100%.  But since TweenMax uses a numerical coordinate system, I'm wondering if there's a commonly used approach to translate that to a percentage-based coordinate system?  Can TweenMax work with percents instead of fixed coordinates?  The examples I've found seem to use multiple CSS definitions for multiple platform types -- although this seems like a real pain -- particularly if the coordinates don't need to be that precise.   Or is a % based method inadvisable for some reason? 

Link to comment
Share on other sites

Hi and welcome to the forums.


The JS version does works with percentages for those CSS properties that accept percentages. Be aware that transform matrix properties don't work with percentages, but left, top, margins, etc. work fine.


Also keep in mind that document flow is a bit of a puzzle when you start, but once you got the handle of it you shouldn't have any problem.


If you set up a simple codepen or fiddle illustrating the issue, we could get a better look to what the problem is.




  • Like 1
Link to comment
Share on other sites

'Not a specific problem yet.  Just trying to see my way through the project before jumping in.


Mostly the .js version looks like it will be a very clean port as the Flash version is old AS2 (very close to .js), and the TweenMax syntax looks similar -- but the coordinate system on fluid display sizes is what I imagine the biggest difference is for most ports.   No matrix transforms, so percentage coordinates should work just fine.


Thanks for the reply.   

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.