Jump to content
AllTheTime

Overriding and replacing animation between states on Click/Keydown Event

Recommended Posts

http://allthetime.co.nf/GSAPslider/

 

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?

 

Share this post


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

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

// Third Frame Animations

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

// Fourth Frame Animations
tl4
  .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
masterTl
  .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)
dt1.seek(time);
}

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


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:

 

http://www.greensock.com/sequence-video/

 

Rodrigo.

  • Like 1

Share this post


Link to post
Share on other sites

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.

 

prndl_example_multi_8.jpg

Share this post


Link to post
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();

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

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.

  • Recently Browsing   0 members

    No registered users viewing this page.