Jump to content
Search Community

GSAP unable to reverse tween because deletes after?

TheNomadicAspie test
Moderator Tag

Recommended Posts

From what I understand, tweens delete themselves when the animation is over, correct? So how can I reverse it?


I have two functions, showButton and hideButton. hideButton should always move the button off screen if it's not already, and showButton should move the button back to the original location.

 

Sometimes the functions are called from my code again before the animation finishes, so I need to ensure the animation doesn't play while already in progress. To do that, I thought using .reverse() would be a clean way to ensure the animation returns to the original position, but I'm never able to call it because the tween no longer exists when the animation finishes.

 

Could anyone please help me figure out what I'm doing wrong? I tried to create a CodePen, but keep getting "gsap.to/gsap.registerEffect is not a function" even after adding gsap as a library.

 

let hide_left_button_tween
let hide_right_button_tween

function showButton(button, text_string = false, buttonFunction = false) {
	console.log("showButton showing ", button)
	const tl = gsap.timeline()
	tl.swapButtonText(button, { text: text_string })
	button.onclick = buttonFunction
	if (!state_dict["is_speech_bubble_bottom_bar"]) {
		showSpeechBubbleBottomBar()
	}
	if (button === left_button) {
		if (hide_left_button_tween) {
			console.log("showButton hide_left_button_tween found, reversing")
			hide_left_button_tween.reverse()
		}
	} else if (button === right_button) {
		if (hide_right_button_tween) {
			console.log("showButton hide_right_button_tween found, reversing")
			hide_right_button_tween.reverse()
		}
	}
}

function hideButton(button, show = false, text_string = false, buttonFunction = false) {
	console.log("hideButton hiding ", button)
	if (button === left_button && state_dict.is_left_button) {
		hide_left_button_tween = gsap.to(left_button, {
			x: -window.screen.width,
			ease: "none",
			duration: 0.5,
			paused: true,
			onStart() {
				state_dict.animation_counter++
				state_dict.is_left_button = false
			},
			onComplete() {
				hide_left_button_tween = false
				if (show) {
					left_button.innerText = text_string
					left_button.onclick = buttonFunction
					showButton(left_button)
				} else {
					left_button.removeAttribute("onclick")
				}
				state_dict.animation_counter--
			},
		})
		hide_left_button_tween.play()
	} else if (button === right_button && state_dict.is_right_button) {
		hide_right_button_tween = gsap.to(right_button, {
			x: window.screen.width,
			ease: "none",
			duration: 0.5,
			paused: true,
			onStart() {
				state_dict.animation_counter++
				state_dict.is_right_button = false
			},
			onComplete() {
				hide_right_button_tween = false
				if (show) {
					right_button.innerText = text_string
					right_button.onclick = buttonFunction
					showButton(right_button)
				} else {
					right_button.removeAttribute("onclick")
				}
				state_dict.animation_counter--
			},
		})
		hide_right_button_tween.play()
	}
}

 

Link to comment
Share on other sites

42 minutes ago, TheNomadicAspie said:

From what I understand, tweens delete themselves when the animation is over, correct?

No, that is not correct. GSAP merely releases its own references internally to the tween instances after they complete so that they're available for garbage collection but that's VERY different. You can easily reverse an animation: 

let hide = gsap.to("#id", {xPercent: -100, ease: "none", paused: true});

hideButton.addEventListener("click", () => hide.play());
showButton.addEventListener("click", () => hide.reverse());

If you're still having trouble, please provide a minimal demo and we'd be happy to take a peek at any GSAP-related questions. 

  • Like 1
Link to comment
Share on other sites

46 minutes ago, GreenSock said:

No, that is not correct. GSAP merely releases its own references internally to the tween instances after they complete so that they're available for garbage collection but that's VERY different. You can easily reverse an animation: 

let hide = gsap.to("#id", {xPercent: -100, ease: "none", paused: true});

hideButton.addEventListener("click", () => hide.play());
showButton.addEventListener("click", () => hide.reverse());

If you're still having trouble, please provide a minimal demo and we'd be happy to take a peek at any GSAP-related questions. 

Thanks, knowing that I was misunderstanding that part helped me fix the issue, I didn't realize that.

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