Jump to content


Overriding and replacing animation between states on Click/Keydown Event

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


Link to comment
Share on other sites

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
  .to(one, 1, {left:"-100%"})
  .set(one, {zIndex:-1})
  .set(one, {left:"100%"});

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

// Third Frame Animations

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

// Fourth Frame Animations
  .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
  .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)

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

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:





  • Like 1
Link to comment
Share on other sites

  • 2 years later...

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.



Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.