Jump to content
GreenSock

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

Trying to reverse an animation

Go to solution Solved by OSUblake,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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?

 

Cheers,

Venn.

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

Link to post
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 post
Share on other sites

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. :D

Link to post
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}); 

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();
Link to post
Share on other sites

Ah even better! Thanks Blake!

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.

×