CustomBounce special case weird behaviour

[Dipscom]

Sunday night, I could be doing so many things other than breaking Jack's toys couldn't I?

 

Well, I am that boring sometimes. Sorry Jack.

 

So, the combo that caused the weirdness is CustomBounce + percentage base movement + transformOrigin in a shape element of an SVG.

 

As you will see in the pen (at least in Chrome), the element gets moved to the 0,0 position according to the transformOrigin you define. Not something desirable if you're trying to squash an element.

 

 

See the Pen 44dda20823ef3224e1cda14bac8690cc?editors=1010 by dipscom (@dipscom) on CodePen

[Carl]

Glad to see you taking the new tools for a spin on a Sunday night.

 

Any chance you can reduce this to a single element with a single animation that isn't working?

I'm having a very hard time looking at the code and output and having any idea what box2, box3 or box4 actually are.

I see 10 black and red boxes that each seem to be animating in different ways. 

 

thanks!

[Dipscom]

Work has been keeping me away from new things for a while and I am trying to move to a new place. Between the two there's very little time left.

 

But I have been toying with the new tools a bit, it's just that the wonderful world of banners always lag behind the technology. Officially, most places are now up to GSAP 1.18 so, I have to sit on my hands for a while otherwise I'll end up implementing stuff that is not supported :'(

 

Anyways, to the case in hand.

 

I'll leave the first pen as is because it showcases the different variations of the test. One uses a simple div, one tweens the rect element with xPercent, another the actual svg with xPercent, another one tweens the rect with x position and percent values and the last one is tweening the rect element with pixel values. The red colous shows where the DOM element is, the black square is the rect element.

 

The fact that you say they are all animating in different ways goes to show that something is amiss. The animation is the same in all of them. What is different there is whether the tweening is being done with percent values, with/without transformOrigin or the rect element or a DOM element.

 

Bellow i've isolated just one example - This is tweening a rect element of an svg with yPercent and transformOrigin. The red is the SVG element, the black is the rect element. In Chrome and Opera, the rect is moved according to the transformOrigin defined - in this case "center bottom" to the 0,0 of the SVG element. This does not happen in Safari and FireFox. I have only checked this in a Mac but will suspect something similar happens on the PC.

 

See the Pen 66e5d7a1e613ff5dc7f23bbe8cac813f by dipscom (@dipscom) on CodePen