Jump to content
GreenSock

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

Reset Timeline on Complete

Recommended Posts

Hey, I have a timeline tween that repeats a number of times. When it's complete I want it to return to its initial state. I could do this using an onComplete, but I wonder if there's an available prop that does this automatically?

Link to comment
Share on other sites

It sorta depends what you mean by "original state"

 

Option 1:

... onComplete: function() { this.time(0).kill(); }

This retains inline CSS, but returns things visually to the initial state. Basically it just rewinds the animation to its initial state and then kills it.

 

Option 2: 

// in your tween(s)
... clearProps: "all"

Wipes out any inline CSS. Not sure if that's what you want or not.

 

Option 3:

let state = captureState(".class, #id");
let tl = gsap.timeline({ onComplete: () => revertState(state)});

// record the current inline styles of all the elements passed in
function captureState(elements) {
	let state = [];
	gsap.utils.toArray(elements).forEach(element => state.push(element, element.style.cssText));
	return state;
}

// revert the inline styles
function revertState(state) {
	for (let i = 0; i < state.length; i+=2) {
		state[i].style.cssText = state[i+1];
	}
}

This captures the inline styles of the elements before the animation, and then reverts to those afterwards. It's slightly more complicated, but allows you to keep the inline styles that predated the animation. 

 

Does that help? 

  • Like 3
Link to comment
Share on other sites

Yes, very helpful. Option 1 was what I was thinking of initially. Thanks.

  • Like 1
Link to comment
Share on other sites

  • 4 months later...
On 10/14/2020 at 7:28 PM, GreenSock said:

It sorta depends what you mean by "original state"

 

Option 1:


... onComplete: function() { this.time(0).kill(); }

This retains inline CSS, but returns things visually to the initial state. Basically it just rewinds the animation to its initial state and then kills it.

 

Option 2: 


// in your tween(s)
... clearProps: "all"

Wipes out any inline CSS. Not sure if that's what you want or not.

 

Option 3:


let state = captureState(".class, #id");
let tl = gsap.timeline({ onComplete: () => revertState(state)});

// record the current inline styles of all the elements passed in
function captureState(elements) {
	let state = [];
	gsap.utils.toArray(elements).forEach(element => state.push(element, element.style.cssText));
	return state;
}

// revert the inline styles
function revertState(state) {
	for (let i = 0; i < state.length; i+=2) {
		state[i].style.cssText = state[i+1];
	}
}

This captures the inline styles of the elements before the animation, and then reverts to those afterwards. It's slightly more complicated, but allows you to keep the inline styles that predated the animation. 

 

Does that help? 

Is there a way to clear all the values added to an element style (for example div style="right: value 1; top: 1 value 2") by the timeline onComplete?

Link to comment
Share on other sites

7 minutes ago, tomektomczuk said:

Is there a way to clear all the values added to an element style (for example div style="right: value 1; top: 1 value 2") by the timeline onComplete?

I think you're looking for clearProps: true. Usage: gsap.set(myTarget, { clearProps: true });.

  • Like 1
Link to comment
Share on other sites

inside timeline ? 

gsap.timeline({ clearProps: true });
Link to comment
Share on other sites

It is tween related so it should be in defaults.

This will apply it to every single tween in the timeline though. Might be not what you are after.

 

gsap.timeline({ defaults: { clearProps: true } })

 

Link to comment
Share on other sites

yes, it's doing what I need but before timeline is completed

Link to comment
Share on other sites

19 minutes ago, tomektomczuk said:

yes, it's doing what I need but before timeline is completed

That'll clear all inline CSS properties of each tween's target as soon as each tween is done. That's probably not what you want. If you really want to clear everything at the end of the timeline:

gsap.timeline({ onComplete: () => gsap.set(".all-your-targets", {clearProps: true}) });

That's highly unusual, though. You do realize that'll revert any changes that were made by the animations, right? 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

  • 4 months later...
On 2/25/2021 at 9:44 PM, GreenSock said:

That'll clear all inline CSS properties of each tween's target as soon as each tween is done. That's probably not what you want. If you really want to clear everything at the end of the timeline:


gsap.timeline({ onComplete: () => gsap.set(".all-your-targets", {clearProps: true}) });

That's highly unusual, though. You do realize that'll revert any changes that were made by the animations, right? 

I found this approach useful for animating a modal in, and then when the closing animation completes to revert the modal element to its original state so it can be opened again.

  • Like 1
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   1 member

×