Trying to reverse an animation

[venn]

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?

 

Cheers,

Venn.

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

[OSUblake]

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.

[venn]

Thanks!

 

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.

[venn]

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}); 

reverseTween
.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
reverseTween.play();

// Reverse the tween
reverseTween.reverse();

[OSUblake]

Not sure if I totally understand the effect, but here's a post on element morphing. I'm only showing a simple full screen morph, but you can do more advanced morphing by repeating the process for any child elements.

http://greensock.com/forums/topic/14206-full-screen-a-div/?p=60466

[venn]

Thanks Blake!

 

Sorry for my super unclear explanation.

I have updated the codepen demo.

 

Here is the final result.

See the Pen qNOmRp?editors=0010%C2%A0 by vennsoh (@vennsoh) on CodePen.

[OSUblake]

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.

[venn]

Ah even better! Thanks Blake!