The counter-transform animation in GSAP

[singlexyz]

Hi, friends. I found out a animation way: https://developers.google.com/web/updates/2017/03/performant-expand-and-collapse

 

They call it  counter-transform, the parent element scale down, and the child element scale up

it can make a smooth animation to change to different aspect ratio.

 

But the question is, because the parent and child element scale in SAME time

so the timing function can't be use regular, in article above, they use javascript to generator css keyframes animation.

 

Then I thought of ExpoScaleEase, I use it on code，like:

timeline
	.fromTo(container, { scaleX: 1 }, { scaleX: delta.scaleX, ease: `expoScale(1, ${delta.scaleX})` })
	.fromTo(container, { scaleY: 1 }, { scaleY: delta.scaleY, ease: `expoScale(1, ${delta.scaleY})` }, '<')
	.fromTo(image, { scaleX: 1 }, { scaleX: 1 / delta.scaleX, ease: `expoScale(1, ${1 / delta.scaleX})` }, '<')
	.fromTo(image, { scaleY: 1 }, { scaleY: 1 / delta.scaleY, ease: `expoScale(1, ${1 / delta.scaleY})` }, '<')

 

The parent and child is actually  doing animation

But their animations neutralize each other, Looks no animation

 

Can gsap had the ease plugin to solve it now?

generate css keyframes animation is so...

 

See the Pen yLOoZEm by nayuxuohz (@nayuxuohz) on CodePen

[elegantseagulls]

Hi @singlexyz,

 

Creating this sort of animation in GSAP should be pretty straight forward. It's tough to break down with your codepen sample however, as it looks to me like you've got some thing in your CSS countering what you are trying to achieve in your animation (like adding object-fit and new image size parameters on click).  I think the example you have setup is over-complicating things too.

 

Is this what you're trying to achieve?

See the Pen rNezbgR by ryan_labar (@ryan_labar) on CodePen

[OSUblake]

Here's an example using v2. Shouldn't be too hard to convert to v3.

 

See the Pen xYMeKP by osublake (@osublake) on CodePen

 

[ZachSaucier]

While I agree with Ryan that your demo is overly complex and Ryan's approach is 100% valid, I think you're going for an approach like this? 

See the Pen LYNzGBw by GreenSock (@GreenSock) on CodePen