Jump to content
GreenSock

ChronixPsyc

How to reverse a timeline

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

 

I've scowered the forums and cannot actually find an answer to this (most likely extremely simple) issue I have.

 

I am trying to make this mask reverse and repeat itself on complete.

 

I've tried everything and cannot for the life of me get it to work.

 

Would anyone be kind enough to explain to me how to use reverse and restart or resume if thats what I need to use?

 

My code is below:

var tl = new TimelineLite();

tl.fromTo(powerMask, 1, {height:250}, {height:0})
		
		$('#background').one("click", function() {
			tl.stop();
			arrowRotation();
		})

Many thanks!

Link to comment
Share on other sites

I'm assuming you want the timeline to automatically reverse right (not tl.reverse())? TimelineLite doesn't have repeat functionality, but TimelineMax does. Try:

var tl = new TimelineMax({ repeat:-1, yoyo:true });
// repeat:-1 means repeat forever
// yoyo:true makes it play then reverse then play etc
  • Like 3
Link to comment
Share on other sites

 

I'm assuming you want the timeline to automatically reverse right (not tl.reverse())? TimelineLite doesn't have repeat functionality, but TimelineMax does. Try:

var tl = new TimelineMax({ repeat:-1, yoyo:true });
// repeat:-1 means repeat forever
// yoyo:true makes it play then reverse then play etc

 

That's amazing! Thank you so much!

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.
×