Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Nate Balcom

Run sequence of animations on keypress

Recommended Posts

I have an animation I'm working on that has 4 elements. Each element on key press needs to animate. I can't figure out the logic to make this happen. I've been able to create my first animation, but am stuck on how to set multiple animations. Also, once I have all my animations working how do I call them on an on key press event?

 

I want to do something very close to this.

 

Here's my animation code.

// 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")

I also added a graphic if it helps. Little help anyone?

 

 

post-43304-0-38087400-1470168154_thumb.jpg

See the Pen QEVaRY by nbalcom (@nbalcom) on CodePen

Link to comment
Share on other sites

To play a timeline on a keypress: (hit the left or right arrow keys).  

 

See the Pen GqXQJd by rfenik (@rfenik) on CodePen

  • Like 2
Link to comment
Share on other sites

Hmm. I gave this a try, but it just makes my graphics disappear. When I removed the spaces/ cleanup code from the script it worked like it did before, but the arrow buttons didn't work. I added a few lines here, but still no go.

$(window).keydown(function(e){
  //P
    if (e.keyCode == 80) {park.reverse();
    }
  //R
      if (e.keyCode == 82) {park.play();
    }
  //N
      if (e.keyCode == 78) {park.play();
    }
  //D
      if (e.keyCode == 68) {park.play();
    }
});
Link to comment
Share on other sites

Hi Nate,

 

The issue here could be resolved using TimelineMax, labels and the tweenTo and tweenFromTo methods.

 

http://greensock.com/docs/#/HTML5/Sequencing/TimelineMax/tweenTo/

 

http://greensock.com/docs/#/HTML5/Sequencing/TimelineMax/tweenFromTo/

 

Also it could be solved using just labels and the play and reverse methods using the labels as starting points:

var tl = new TimelineLite({paused:true});

tl
  .to(element, 1, {vars}, "label_1")
  .to(element, 1, {vars}, "label_2")
  .to(element, 1, {vars}, "label_3")
  .to(element, 1, {vars}, "label_4");

// then on the click/key events
function eventHandler(label, direction){
  switch (direction) {
    case "forward":
    tl.play(label); // plays the timeline from the specific label
    break;
    case "back":
    tl.reverse(label); // reverses the timeline from the specific label
  }
}

// then calling the function
eventHandler(forward, "label_2");// plays from label_2
Unfortunately I don't have time to create a working sample of this.

 

Hopefully this is enough to get you started.

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