Jump to content
Search Community

Trying to reverse an animation

venn test
Moderator Tag

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

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

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 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.
×
×
  • Create New...