Jump to content

Nate Balcom

Advanced Animation Logic

Go to solution Solved by GreenSock,

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 was able to create a barrel roll animation with help from Carl, but now need to add a little bit more interactivity to my current menu. 


I currently have a car gear system that animates in barrel roll fashion that works by pressing the numbers 1-4 on your keyboard. It works how it's supposed to when it's ascending, but not descending. When you shift from anything left of drive the numbers need to barrel roll up. 


I'm thinking this is a job for TimeLineLite, but am a nube when it comes to formatting this code. Does anyone have advice how I should proceed or a link to some code I can look at possibly? 

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

Link to comment
Share on other sites

  • Solution

I'm not quite sure I understand the effect you're going for, but I took a guess:



I just sequenced all the animations in a TimelineMax (remove the paused:true to see it just play straight through). I placed a label at each key spot, and then I just used TimelineMax's tweenTo() to animate the virtual playhead to the appropriate spot on that timeline according to what number they hit. That way, it can go backwards or forwards - it doesn't really matter. 


There are a bunch of different ways to do this, but perhaps this will get you moving in the right direction. 

TweenLite.defaultEase = Linear.easeNone;
var tl = new TimelineMax({paused:true});
tl.fromTo("#strip1 img", 0.3, {y:-219}, {y:-145}, "strip0")
  .to("#strip1 img", 0.3, {y:-74}, "strip1")
  .fromTo("#strip2 img", 0.3, {y:-219}, {y:-145}, "strip1")
  .to("#strip2 img", 0.3, {y:-74}, "strip2")
  .fromTo("#strip3 img", 0.3, {y:-219}, {y:-145}, "strip2")
  .to("#strip3 img", 0.3, {y:-74}, "strip3")
  .fromTo("#strip4 img", 0.3, {y:-219}, {y:-145}, "strip3")

    if (e.keyCode == 49 || e.keyCode == 97) {
        tl.tweenTo("strip1", {ease:Power2.easeOut});
    if (e.keyCode == 50 || e.keyCode == 98) {
        tl.tweenTo("strip2", {ease:Power2.easeOut});
    if (e.keyCode == 51 || e.keyCode == 99) {
        tl.tweenTo("strip3", {ease:Power2.easeOut});
  // Drive
    if (e.keyCode == 52 || e.keyCode == 100) {
        tl.tweenTo("strip4", {ease:Power2.easeOut});

Does that help at all? 

  • Like 3
Link to comment
Share on other sites

Jack you guys here at Greensock are way awesome. That's exactly what I was looking for. Thanks for providing code to a nube. I have a lot of projects coming up that I'll be utilizing GSAP for. I'm staring to wrap my head around the syntax.Thanks so much Jack. 


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

  • Like 2
Link to comment
Share on other sites

Happy to help, Nate. Glad to hear you're starting to grasp the syntax. Seriously, keep with it and in no time you're gonna feel so comfortable doing just about anything with animation :) 


Happy tweening!

  • Like 2
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.