Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

The counter-transform animation in GSAP

Recommended Posts

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:

	.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

Share this post

Link to post
Share on other sites

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

  • Like 5

Share this post

Link to post
Share on other sites

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


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


  • Like 4

Share this post

Link to post
Share on other sites

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

  • Like 2

Share this post

Link to post
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.