Jump to content
Search Community

Stop animation after playing a label

RABBIT DIGITAL test
Moderator Tag

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,

I have created labels in TimeLineMax()

I can play a particular label ex: seq.play("label1")

but it plays the subsequent labels after "label1", I dont want it to play "label2", "label3" etc

 

Same if problem if I call seq.play("label2"), it plays the next label also i.e "label3" etc

 

How do I stop the animation after it plays

 

Thanks

Dexter

Link to comment
Share on other sites

TimelineMax has a tweenFromTo() method that's perfect for this:

 

 

seq.tweenFromTo("label1", "label2");
 

 

FYI, under the hood all it's doing is pausing the timeline and creating a tween that's animating the timeline's time() from one value to another. You can even apply easing, use an onComplete, etc. if you want. See the docs for details. 

http://api.greensock.com/js/com/greensock/TimelineMax.html#tweenFromTo()

  • Like 3
Link to comment
Share on other sites

Another technique would be to have callbacks in your timeline that pause the timeline before each label. 

 

 

var red = $("#red"),
    tl = new TimelineMax({paused:true});


tl.to(red, 1, {left:100}, "label1")
  .add(pause)
  .to(red, 1, {rotation:360}, "label2")
  .add(pause)
  .to(red, 1, {scale:.5}, "label3")
  .add(pause)
  .to(red, 1, {backgroundColor:"green"}, "label4");


function pause(){
  tl.pause();  
}  
  
$("#nextLabel").click(function(){
   tl.play();
})


  
$("#label2").click(function(){
   tl.play("label2");
})
 

Example here: 

See the Pen c5c078c0d1f9f5f0ea272c442171419d by GreenSock (@GreenSock) on CodePen

 

 

  • Like 1
Link to comment
Share on other sites

  • 2 months later...

I have a question that's similar to this post.

I want to use a button to play 2 animations simultaneously to a label then stop.

This is probably more of a syntax question. How would I get my example to work?

 

 

beneftisContent = new TimelineMax({paused:true});
beneftisContent.to($(".benefit-scroll"), 1, {top:0}, "label1")
.to($(".floater"), 1, {css:{backgroundPosition: "150px 0px"}}, 0)
.add(pause)
.to($(".benefit-scroll"), 1, {top:-480}, "label2")
.to($(".floater"), 1, {css:{backgroundPosition: "150px -400px"}}, 0)
.add(pause)
.to($(".benefit-scroll"), 1, {top:-960}, "label3")
.to($(".floater"), 1, {css:{backgroundPosition: "150px -600px"}}, 0);


function pause(){
 beneftisContent.pause();  
}  
$("a.security").click(function(){
  beneftisContent.tweenTo("label1");
})
$("a.e-managment").click(function(){
  beneftisContent.tweenTo("label2");
})
    $("a.convenience").click(function(){
  beneftisContent.tweenTo("label3");
})

Thanks

Link to comment
Share on other sites

Hi, Keep in mind the fact that both, tweenTo() and tweenFromTo(), methods accept callbacks, so you can add an onComplete on your code to call the pause() function, like this:

 

$("a.security").click(function(){ 
 beneftisContent.tweenTo("label1", {onComplete:pause});
})
$("a.e-managment").click(function(){
 beneftisContent.tweenTo("label2", {onComplete:pause});
})
$("a.convenience").click(function(){
 beneftisContent.tweenTo("label3", {onComplete:pause});
})
For more info take a look at the api reference

 

Hope this helps,

Cheers,

Rodrigo.

Link to comment
Share on other sites

Hey Rodrigo, thanks for replying.

 

I'll try using the call back. But my original question was about the code I posted above, in which the first part of the timeline would play and then the second part. So if I tweeTo label 2, the top will animate and then the background position after it has complete. How can I have both of those happen at the same time. and then pause?

Link to comment
Share on other sites

I'm a little confused by the question, but I think the problem lies in where you are placing your tweens

 

 

beneftisContent = new TimelineMax({paused:true});
beneftisContent.to($(".benefit-scroll"), 1, {top:0}, "label1")
.to($(".floater"), 1, {css:{backgroundPosition: "150px 0px"}}, 0)
.add(pause)
.to($(".benefit-scroll"), 1, {top:-480}, "label2")
.to($(".floater"), 1, {css:{backgroundPosition: "150px -400px"}}, 0)
.add(pause)
.to($(".benefit-scroll"), 1, {top:-960}, "label3")
.to($(".floater"), 1, {css:{backgroundPosition: "150px -600px"}}, 0);
 
all three of the tweens in red are scheduled to play at the very beginning of the timeline at a time of 0

I don't think that is what you want as all three tweens target the same property of the same element but with different values.

 

I think you want something like this

 

 

beneftisContent = new TimelineMax({paused:true});
beneftisContent.to($(".benefit-scroll"), 1, {top:0}, "label1")
.to($(".floater"), 1, {css:{backgroundPosition: "150px 0px"}}, "label1")
.add(pause)
.to($(".benefit-scroll"), 1, {top:-480}, "label2")
.to($(".floater"), 1, {css:{backgroundPosition: "150px -400px"}},"label2")
.add(pause)
.to($(".benefit-scroll"), 1, {top:-960}, "label3")
.to($(".floater"), 1, {css:{backgroundPosition: "150px -600px"}}, "label3");

in the code above the tweens with the same label will start at the same time.

  • Like 1
Link to comment
Share on other sites

No worries. We're here to help. There's quite a bit to learn with the timeline classes.

 

Labels are very powerful as they not only can be used as time-markers for navigation:

timeline.seek("someLabel");

 

but they also mark insertion points in timelines for tweens, timelines and callbacks.

Link to comment
Share on other sites

Hey Carl, I'm still having a few issues with my animation. It seems as though when I click my button to "tweenTo label2" It just sets the tween at "label1". Like wise when I click my button to "tweenTo label3" It performs as the label2 button should.

I'm confused. At this point my code looks like:

 

Any ideas?

benefitsTl = new TimelineMax({paused:true});
benefitsTl.to($(".benefit-scroll"), 1, {top:0}, "label1")
.to($(".floater"), 1, {css:{backgroundPosition: "150px 0px"}}, "label1")
.to($(".benefit-scroll"), 1, {top:-500}, "label2")
.to($(".floater"), .6, {css:{backgroundPosition: "150px -500px"}},"label2")
.to($(".benefit-scroll"), 1, {top:-960}, "label3")
.to($(".floater"), 1, {css:{backgroundPosition: "150px -600px"}}, "label3");


$(".security").click(function(e){
e.preventDefault();
  benefitsTl.tweenTo("label1");
});
$(".emanagement").click(function(e){
e.preventDefault();
  benefitsTl.tweenTo("label2");
});
    $(".convenience").click(function(e){
    e.preventDefault();
  benefitsTl.tweenTo("label3");
});
Link to comment
Share on other sites

Labels mark where a tween will begin. So if you tweenTo("label3"). You aren't going to see the tweens play that are placed at "label3". 

 

If you want to see the tweens at "label3" play, you would use:

benefitsTL.play("label3");// 

 

Does that clear things up?

Link to comment
Share on other sites

That actually does make sense. After playing with the animation some more, i figured that the label is where the animation ends. 

So my default state of label1 is set within the css, and not by setting label1 with what I want the default state to be. 

 

Maybe I shoulda read the manual...

 

Thanks for the time, If you're ever in New Orleans, beer on me!

  • 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   0 members

    • No registered users viewing this page.
×
×
  • Create New...