The transform property resets the xPercent and yPercent values

[Gary]

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

[Diaco]

Hi Gary 

 

to have Prezi-like zoom effect ( something like Impress.js ) , you don't need to set outerdiv Matrix ! you just need to tween inner div and set outer div to overflow:hidden . otherwise , can you provide a same effect live example ?

[Gary]

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.  

[Diaco]

if i understand correctly , pls check this simple demo :

 

See the Pen qELGBd by MAW (@MAW) on CodePen

 

you can control perfectly timeline with labels , .tweenTo(), .progress() or whatever you want

[Gary]

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,

Gary

[GreenSock]

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? 

TweenMax_1.16.2_preview.zip

[Gary]

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!

 

Gary

[Jonathan]

Nice additional logic to the CSSPlugin Jack.. really Awesome!