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?