Tween To Buttons

[Amanda 4 Likes (Newbie)]

Hi, 

 

I have slides moving on a timeline and I've created buttons to jump directly to a slide (note: the slides split in two and the left side moves down and the right side moves up)

 

Rather than going directly to the slide, is it possible to tween to the slide quickly, rather than going through the animation at it's set speed, with the pauses and everything. 

 

Thanks in advance!

 

See the Pen BjzBav by ald603 (@ald603) on CodePen

[Diaco 1,948 Likes (Superhero)]

Hi ald603 

 

if i understood correctly , you can use .tweenTo() method : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/tweenTo/

[Amanda 4 Likes (Newbie)]

Hi, the thing is the tweenTo() moves at the same speed as the animation and does pauses and so forth. I am looking for a way to make it move very quickly, with no pauses. 

 

Thanks!

[Diaco 1,948 Likes (Superhero)]

ok , pls try this :

tl.tweenTo( Label , { onComplete : function(){ this.timeScale(1) }}).timeScale('5');  // Label is your label name

the above code set timeline timeScale to 5 , so will play 5 times faster , and set again timescale to 1 with onComplete , so when you .play() , will play with normal speed

 

or

TweenLite.to( tl , 0.5 , { time : tl.getLabelTime( Label )  } );  // Label is your label name

and the above code will change timeline time (play head) , to label time position with duration 0.5 

[Amanda 4 Likes (Newbie)]

THANKS! I've updated my codepen sample and it's working almost as I hope. 

 

There are three things I have questions about 

 

1. It doesn't seem to be continuing the animation after pressing a button. It goes to that part of the timeline and stops. 

 

2. Is there a way to skip over the pauses? 

 

3. When I have taken this sample that is pretty much working on CodePen, and applied it to the site I'm working on locally on my computer, the buttons aren't functioning, I've triple checked my code and it's not happening. 

[Amanda 4 Likes (Newbie)]

Hi, I've almost got it working, and hoping for just a little more guidance. I have updated the CodePen demo, and have taken the onclick out of the html and put it into the js file. What I've added is the following: 

var buttonOne = $('#one');
  var clicked = false;
  buttonOne.click(function() {
    if (clicked) {
      tl1.tweenTo('first', {
        onComplete: function() {
          this.timeScale(1);
        }
      }).timeScale('7');
    } 
    clicked = !clicked;
  });

And it's almost working. The only thing is that it works on DOUBLE click, rather than a single click. If someone can steer me in the right direction, it'd be much appreciated. 

 

Thanks!

[Tahir Ahmed 93 Likes (Contributor)]

I could be wrong but I think you don't need the parts with this `clicked` variable. Not entirely sure why you have them there in the first place but these are the parts enforcing you to click twice in order run the animation so I think the final code should look like:

var buttonOne = $('#one');
buttonOne.click(function() {
  tl1.tweenTo('first', {
     onComplete: function() {
      this.timeScale(1);
    }
  }).timeScale('7');
});

Hope this helps.

 

P.S. I am also curious in knowing the answer to the 2nd question you posted above i.e. a way to skip pauses defined in a timeline. There are a number of situations where I could see this being useful, your situation is a prime example of it. Perhaps someone here can answer this, I would like to know as well.

[OSUblake 9,990 Likes (Superhero)]

Not sure if there's a built-in way to skip a pause, but you can add a callback to a pause, which you could use to determine if the timeline should stay paused or continue playing.

 

See the Pen 6a628866673fc3eee0e587aeb202c92c?editors=001 by osublake (@osublake) on CodePen

[OSUblake 9,990 Likes (Superhero)]

Looking at Tahir's question again I think I might be confused. Were you talking about paused timelines or using addPause?

[Tahir Ahmed 93 Likes (Contributor)]

Hey @OSUBlake, cannot speak for @ald603 but I am, in general, interested in an idea of skipping `delay` and overall gaps put in a timeline using `position` parameter (e.g. intentionally creating gaps using the `+=` operator in `position`) by having some kind of a fast-forward control over a timeline.

 

I am pretty sure it doesn't exist in GSAP system yet but I can see the benefits of having such a feature, this problem here by @ald603 is a prime example of such a use-case.

[OSUblake 9,990 Likes (Superhero)]

Gotcha. I don't know of an easy way to do that. I would probably just create a new timeline without the delays.

[Amanda 4 Likes (Newbie)]

Thanks I had too much code in the button click. I wasn't totally sure how to write it myself, and I had copied someone else's similar code. I've updated the code in the CodePen demo if anyone else is interested. 

[Carl 9,066 Likes (Superhero)]

 

I am, in general, interested in an idea of skipping `delay` and overall gaps put in a timeline using `position` parameter (e.g. intentionally creating gaps using the `+=` operator in `position`) by having some kind of a fast-forward control over a timeline. - Tahir Amed

 

 

 

Hi Tahir,

 

First, it's great having you participate in the forums. I've really been enjoying reading your suggestions. It's clear you have a real solid understanding of GSAP and you do a great job helping others understand how it works. Thanks!

 

To answer your question, no, there isn't anything baked into the system that allows you to easily speed through a timeline and ignore gaps that are created by the position parameter. 

 

In situations where you are building a slideshow and you need things to transition in, pause, and then transition out I would most often opt to NOT put everything into one timeline. Instead I would create a system that allows random-access navigation – meaning there would be a transition manager function that could handle animating out of any slide and into any slide. Each slide with be an Object that has its own in() and out() methods for creating timelines that animate things in and out;) A VERY rough implementation would look something like:

function navigateFromTo(currentSlide, nextSlide) {
   currentSlide.out();
   nextSlide.in();
}

navigateFromTo(slide1, slide4);

This would give you ultimate flexibility in allowing the user to choose any slide they want to go to from any slide. 

 

I go into more detail here: http://greensock.com/forums/topic/11162-how-to-setup-control-of-tweens-and-timelines-together-and-separately/?p=44994

 

However, that level of complexity isn't always necessary, especially in a banner or a simplistic image carousel. 

 

There are probably a dozen ways to allow some level of "random access navigation" that allows you to quickly tweenTo() another part of timeline and avoid pauses, but the trick is to NOT have any pauses or delays in the timeline;) So how do we create a timeline that isn't paused but have it play on its own with pauses?

 

My suggestion is to create a function that gets called periodically and advances the timeline to the next slide.

 

function nextSlide() {
  var nextLabel = tl.getLabelAfter();
  if(nextLabel) {
    tl.tweenTo(nextLabel, {onComplete:wait});
  } else {
    //no next label so play out-transition of orange
    tl.tweenTo(tl.duration(), {onComplete:restart});
  }  
}


function restart() {
  tl.progress(0);// go back to beginning
  //trigger next transition
  nextSlide();
}


function wait() {
  TweenLite.delayedCall(delay, nextSlide)
}

 

 

 

http://codepen.io/GreenSock/pen/OMXoZz/?editors=001

 

With that setup you could then still have some buttons that tweenTo() any slide with a fast timeScale(), you would just have to make sure you kill the delayedCalls to the delayedCall that advances to the next slide via

TweenLite.killTweensOf(wait);

Its really tough to recommend a best way, but hopefully this opens up some ideas.

[Tahir Ahmed 93 Likes (Contributor)]

Hi Carl,

 

Thanks a lot for the nice words. I am still learning

 

And thanks a lot for the detailed explanation as well. In fact, I currently use the same technique whenever I have to deal with such situations i.e. create a timeline without delays and another layer of management on top of it all to handle the _pauses_ and yes, usually it means using the `.delayedCall()` method.

 

I can see the reason why this would be just too impractical to bake something like this in the core and thus not worth the effort. Performance (file-size and computations) being the top reason. Far too many scenarios to handle.

 

Consider this chapter closed. For now at least.

 

Thanks a lot again