Overriding and replacing animation between states on Click/Keydown Event

[AllTheTime]

http://allthetime.co.nf/GSAPslider/

 

I'm developing a GSAP slider and it works well now with keyboard and click control. I want to be able to animate between states upon receiving a click/key event. So, when it's on slide 1 and I click the button for slide 4 instead of going to slide 4 instantly, the animation scrolls quickly across slide 2 and 3 and then lands at 4.

 

Any ideas?

 

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

Since you're using a timeline instance to build the slider , instead of adding relative positioning to each timeline's first instance, you could nest those timelines inside a parent one:

var masterTl = new TimelineMax({repeat:-1}),
    tl1 = new TimelineLite(),
    tl2 = new TimelineLite(),
    tl3 = new TimelineLite(),
    tl4 = new TimelineLite();

// First Frame Animations
tl1
  .to(one, 1, {left:"-100%"})
  .set(one, {zIndex:-1})
  .set(one, {left:"100%"});

// Second Frame Animations
tl2
  .to(two, 1, {left:"0%"})
  .to(two, 1, {left:"-100%"});

// Third Frame Animations

tl3
  .to(three, 1, {left:"0%"})
  .to(three, 1, {left:"-100%"});

// Fourth Frame Animations
tl4
  .to(four, 1, {left:"0%"})
  .to(four, 1, {left:"-100%"})
  .to(one, 1, {left:"0%"}, "-=1");

// then add the individual timelines to the parent one
masterTl
  .add(tl1, "first-frame")
  .add("second-frame", "-=1")
  .add(tl2, "second-frame")
  .add("third-frame", "-=1")
  .add(tl3, "third-frame")
  .add("fourth-frame", "-=1")
  .add(tl4, "fourth-frame");

With that type of structure you can use the tweenTo() method, in order to move the master timeline from it's current position to the label corresponding to the button clicked by the user:

// Skipping Functions
function go(label, time){
masterTl.tweenTo(label, onComplete:resumeMaster)
dt1.seek(time);
}

// since the tweenTo method pauses the timeline when it reaches the selected point
// add this callback to resume the timeline
function resumeMaster()
{
  masterTl.resume();
}


function go1(){go("first-frame",0);}
function go2(){go("second-frame",2);}
function go3(){go("third-frame",4);}
function go4(){go("fourth-frame",6);}

// Click Event Listeners
dot1.addEventListener("click", go1, false);
dot2.addEventListener("click", go2, false);
dot3.addEventListener("click", go3, false);
dot4.addEventListener("click", go4, false);

There are other possibilities as well, but they imply getting other parameters, such as the time of each label in order to tween the master timeline's time to that particular position but in a specific amount of time, but that's for a different scenario.

 

If you want to learn more about labels and how to nest timelines into parent ones, check this great video made by Carl:

 

http://www.greensock.com/sequence-video/

 

Rodrigo.

[Nate Balcom]

I want to do something very similar to this.

 

I'm working a project that has 4 rollover images side by side. I need to animate multiple rollover states depending on key press. I included a graphic to help better explain what I'm talking about. If 1 is clicked 2,3 & 4 should roll down. If 4 is clicked 3,2 & 1 should roll up. If 2 is clicked 3 & 4 should roll down etc, etc. BTW I'm sorry if this sounds confusing.

 

[Nate Balcom]

I feel like I'm getting closer, but am not sure how to get past the first animation. It's doing what I want it to, but the 3 that follow don't trigger. Also I'm not sure how to trigger these by key press. Anyone?

// First Frame Animations
var park = new TimelineLite();

park.from(".park", 0.3, {top: -201})
.from(".reverse", 0.3, {top:-201}, "-=0.20")
.from(".neutral", 0.3, {top:-201}, "-=0.20")
.from(".drive", 0.3, {top:-201}, "-=0.20");

// Second Frame Animations

var reverse = new TimelineLite();

reverse
.from(".reverse", 0.3, {bottom: 100})
.from(".reverse", 0.3, {bottom: -100}, "-=0.20")
.from(".neutral", 0.3, {bottom: 100}, "-=0.20")
.from(".drive", 0.3, {bottom: 100}, "-=0.20");


// Third Frame Animations
var neutral = new TimelineLite();

neutral
.from(".reverse", 0.3, {bottom: 100})
.from(".reverse", 0.3, {bottom: -100}, "-=0.20")
.from(".neutral", 0.3, {bottom: 100}, "-=0.20")
.from(".drive", 0.3, {bottom: 100}, "-=0.20")

// Fourth Frame Animations
var drive = new TimelineLite();

drive
.from(".reverse", 0.3, {bottom: 100})
.from(".reverse", 0.3, {bottom: -100}, "-=0.20")
.from(".neutral", 0.3, {bottom: 100}, "-=0.20")
.from(".drive", 0.3, {bottom: 100}, "-=0.20")

[Carl]

Duplicate post. Please continue discussion here

http://greensock.com/forums/topic/14853-run-sequence-of-animations-on-keypress/#entry63761