Jump to content

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

Trying to reverse an animation

Recommended Posts

Hi there,


I am trying to create the effect of one shape morph in width from target1 to target2.

And then morph back from target2 to target1 using .reverse()


However I am unsure why my .reverse() isn't working?




See the Pen qNOmRp by vennsoh (@vennsoh) on CodePen

Link to comment
Share on other sites

You can't click on the target because your move element is covering it. You need to remove the pointer events. You also misspelled "width".

See the Pen RRWLOm?editors=0010 by osublake (@osublake) on CodePen

  • Like 4
Link to comment
Share on other sites



That's super helpful! 

I have further revised the code.


See the Pen qNOmRp?editors=0010 by vennsoh (@vennsoh) on CodePen


I am trying to create this effect that when you click on target1, the move object will expand in width and morph into target2.

But instead of snapping to target2, the shape will morph back into target2 by shrinking it width from left to right. If you know what I mean.


I tried changing the left position and width at the same time to mimic that effect but it seems that this isn't the correct way.


Then when you click on target2, it will morph back into target1. 

It should grow out from target2 to target1 instead of full width and then shrink it back to target1.


I am trying to figure this out, any pseudo code, explanation, etc will be much appreciated. :D

Link to comment
Share on other sites

I have figured that out with the following code in an actual project of mine.


Here it is. Not sure if this is the best way.


I am creating the carousel dots morphing sort of effect that can be seen in some of onboarding experience within Google apps.

// Morphing dot
morphDot = allDots[0].copy();
morphDot.backgroundColor = "#007dba";

reverseTween = new TimelineMax({paused: true, onReverseComplete:reverseFunction}); 

.set(morphDot, {x: allDots[0].x})
.to(morphDot, standardTime, {width: 48})
.to(morphDot, standardTime, {x: allDots[1].x, width: 16});

function reverseFunction(){
TweenMax.set(morphDot, {width: 16});

// Calling the tween

// Reverse the tween
Link to comment
Share on other sites

It fails if you don't click in the right sequence. And interrupting the animation can mess it up. It might be better to toggle it like this.

See the Pen QEywbm?editors=0010%C2%A0 by osublake (@osublake) on CodePen

  • Like 3
Link to comment
Share on other sites

Ah even better! Thanks Blake!

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.