Jump to content
GreenSock

Gerinho

Stopping an animation between two labels

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 there everyone,

I'm hoping to explain this as clear as possible.

I have two buttons: one button Is for playing a tween between two certain labels inside a timeline. The second button is for canceling the tween from the first button, and starting a new timeline.

var tween1Tl = new TimelineMax({ repeat: 0, paused: true});
tween1Tl


.add("startLabel")

.fromTo('#something', .5, {x:'-50', opacity:0}, {x:'0', opacity:1,ease: Power3.easeInOut})
.fromTo('#somethingElse', .5, {y:'-50', opacity:0}, {y:'0', opacity:1})

.add("halfwayLabel")

.fromTo('#fooBar', .5, {scale:0, opacity:0}, {scale:1, opacity:1,ease: Power3.easeInOut})
.fromTo('#fooBar2', .5, {x:'-50', opacity:0}, {x:'0', opacity:1,ease: Power3.easeInOut})

.add("endLabel")

;

 

$('#btn1').on('click touchstart', function() {
        
tweenTest = Tween1Tl.tweenFromTo("halfwayLabel", "endLabel");
  

});
$('#btn2').on('click touchstart', function() {
        
			tweenTest.pause(0);
 			tween2TL.play();

 ;


My problem:

When I press btn2, I want tweenTest to fully stop and dissapear.. So actually to have it pause at "startLabel".  As you can imagine, when I pause tweenTest right now,  it pauses halfway, so the assets are still there.. I hope I've made my intentions clear and would love someone to help me out.

Thanks in advance!
 

Link to comment
Share on other sites

Does Tween1Tl.seek("startLabel").pause(); work for you? If not, would be great if you can post a demo.

 

 

  • Like 1
Link to comment
Share on other sites

Problem is resolved. Thanks everyone!

Edited by 9kW
Link to comment
Share on other sites

Thanks for the demo, unfortunately it is incredibly confusing due to the language (we're primarily English-speaking here) and the fact that there are 500+ lines of code.

 

I'm confident your issue could be illustrated with less than 50 lines of code.

Perhaps you could make something very small and clear... like you press a red button and something that is the colored red moves. press the green button and the green thing moves. Very simple like that.

 

We don't know what the words Vakantiebudget, eindVakantiekilos, huis, gemisstat3 mean so when we see those as targets of tweens, we have no idea what we are supposed to look for.

 

I'm sure if you can create a super simple timeline or 2 with one or 2 clearly named objects moving around, we will have a better chance of being able to help.

Thanks

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