Jump to content
GreenSock

Amanda

Tween To Buttons

Go to solution Solved by Tahir Ahmed,

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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 

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

  • Solution

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.

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

 

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.

  • Like 4
Link to comment
Share on other sites

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 :)

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