Jump to content

Nate Balcom

Run sequence of animations on keypress

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

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();

.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();

.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();

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




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.

    if (e.keyCode == 80) {park.reverse();
      if (e.keyCode == 82) {park.play();
      if (e.keyCode == 78) {park.play();
      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.






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});

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