Jump to content
GreenSock

redrooster

Reverse morphSVG, master timeline

Go to solution Solved by redrooster,

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 all,

 

I am trying to reverse a timeline that contains a morphSVG transition, but it does not seem to want to return to the 'data-original' coordinates.

 

Here is my code:

var master = new TimelineMax({
		paused: true
	});

	master.add( swipe() );

	//my Animation, morph from one svg to another
	function swipe() {
		var tl = new TimelineMax();
		tl.set(bgSvgStart, {fill: "rgba(33, 32, 32, 0)"})
			.to(bgSvgStart, 0.6, {morphSVG:bgSvgEnd, fill: "rgba(33, 32, 32, 1)", ease: Power2.easeIn});
		return tl;
	}

	if(openingAni == true) {
		//play animation
		master.play();
	} else {
		//play animation in reverse, Not working
		master.reverse();
	}

I have tried a few variants of the above code, but cannot seem to get anything working on the reverse.

 

Thanks,

 

 

Link to comment
Share on other sites

Hi redrooster :)

 

I don't see anything in the code that seems like it shouldn't work, but I don't know if you've played the timeline before trying to reverse it.

 

When you reverse a timeline and don't tell it the time from which it should reverse, it will start the reverse from the current playhead position. If you haven't played anything yet, the playhead is at the beginning and won't reverse.You can fix that by changing your last line to this:

master.reverse(0);

That will start the playback from the end of the timeline. More info about reverse:

 

http://greensock.com/docs/#/HTML5/Sequencing/TimelineMax/reverse/

 

That's the only thing that stands out to me. It's always best to prepare a CodePen for these questions so we can get you the best answers. Please follow this link to see how to create one.

 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Hopefully that helps.

 

Happy tweening.

:)

  • Like 1
Link to comment
Share on other sites

  • Solution

alas, indeed gsap is doing what I needed it to, however all of my other code was breaking it!.

 

For anyone who wants to see a working  demo of this I have made a pen

See the Pen AXmjYw by marklawrencedesign (@marklawrencedesign) on CodePen

 

Thanks PointC - I am 99.99% sure Ill be back in the forums with another question - in future a pen will be the way to illustrate my question more!

 

Cheers,

M

  • Like 2
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.
×