Jump to content
Search Community

The transform property resets the xPercent and yPercent values

Gary 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'm building a Prezi-like zoom effect where the the viewport zooms into div content.  To do this, the outer div needs to be set to an inverse matrix of whatever inner div will be brought to focus.  GSAP builds the matrix by applying the transform parts in a constant order (which is brilliant, by the way) as described in the CSSPlugin docs.


For the outer div, I can't just set the transform parts directly because the order of operations will be wrong.  So, instead I am using the transform property with a string, where the string has the parts in the opposite order.  This seems to work fine except that the xPercent and yPercent variables are stripped.


In the attached code pen, I am setting a no-op transform (no translate, no rotate, 100% scale) but with center alignment using xPercent/yPercent.   I then attempt to set the inverse using the transform property.  This is also no-op, since the inverse of 1 is 1, so there should be no effect.  However, it loses the center alignment.

See the Pen XJooQQ?editors=001 by GaryC (@GaryC) on CodePen

Link to comment
Share on other sites

Thanks for the reply!  Yes, what Impress.js does is exactly what I am attempting to do, but with Greensock instead of CSS animation.  Impress.js does an inverse matrix, just like what I am talking about.  


You're right, I could just move the inner div into the center of the outer div, but what about all the rest of them?  It's much more performant (and simpler) to tween the one outer div than each individual inner div.


The best example I can provide is Impress.js.  I'm trying to make one in GSAP. :) 

Link to comment
Share on other sites

Wow.  Thank-you for spending the time to create that. !!


Your "inner" div is what I was calling "outer" in my last post, and the items were the "inner".  The extra "outer" div in the example is not needed, except maybe to crop with overflow:hidden (but that would lose support for 3D rendering)


The example is manually creating an inverse matrix.  e.g. rotate(-90deg) in CSS and rotation:90 in GSAP.


I agree that it can be done manually, ..but the demo avoids the hard part. It uses CSS to place the items and then GSAP to move them.  Try using GSAP for both.  Particularly, try it with 3d rotation, translation, and scale.  Because GSAP has a constant order-of-precedence (which is a good thing) then just negating the rotation/position and inverting the scale is not enough.  Sure, you can hand calculate (not easily) the equivalent, but it is much easier to use the negated values and apply them in reverse order.  This is exactly what impress.js does.


We kind of went off topic.  Using GSAP to animate a transform property, regardless of my use case, appears to not handle percentage offsets, either xPercent/yPercent or translate(-50%,-50%).  I think this might be a bug because that code is probably far older than the relatively new percentage offset properties.  I'm hoping that there is an easy way to apply them and still use the percent values.   Any thoughts on that?


Thanks for your help,


Link to comment
Share on other sites

Ah, I think I see what you mean. 


The tricky thing is that in order to parse whatever you throw into your "transform" string (which could be an unlimited number of instructions), CSSPlugin must apply them to a <div> and then ask the browser for its computed style (to ensure perfect accuracy) and that value is always reported as a matrix() or matrix3d(). Those NEVER have any kind of percentages. Everything is kinda baked into the raw matrix values, converted into pixels essentially. That's just how the browser works. So as far as I can tell, it's impossible for CSSPlugin to extract and isolate percentage-based translations, especially when they're layered with regular px-based ones. 


In your 2nd example, though, you're hard-coding xPercent:-50, yPercent:-50 into the vars object in addition to passing a transform string. That's an edge case I never even considered because when you apply a transform string, that's all-encompassing and it normally wouldn't make much sense to define a transform string AND individual component values. But in this case, I totally see why you're doing the xPercent and yPercent since those are impossible to extract from the raw transform string. Makes perfect sense here. 


CSSPlugin needed some additional logic injected to look for xPercent and yPercent when there's a transform string defined. I have attached an uncompressed TweenMax with that updated in the [embedded] CSSPlugin. It works great with your 2nd example. Does that solve things for you? 


  • Like 3
Link to comment
Share on other sites

It's working!!!   :)


First, your explanation makes so much sense. I didn't realize that you were just having a div process the transform.  Clever.  Allowing xPercent and yPercent to be set along with the transform property works like a charm.


I continue to be blown away by the amazing Greensock support.  I look forward to the next release with this included.


Thanks to both of you!



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