Pause timeline on rollover after tween complete

[Woj]

Hey guys,

 

I have a little timeline that cycles throw a series of slides automatically. On rollover the timeline is to pause. On rollout a timer is triggered and the timeline plays again. My issue is that I need the timeline to complete animating the slide in. Right now, rollover will just pause the animation in mid cycle.

See the Pen yOgpbZ by stevewojcik (@stevewojcik) on CodePen

[Woj]

I tried using the isActive, but perhaps I dont really know the best way to utilize it. In this codepen if you rollover while its active the animation continues and you do get a console log notifying that the animation is indeed active. The problem is, I cant figure out how to then trigger the code to realize that the mouse is over the button and to not play any further animation.

 

See the Pen zqNRpw by stevewojcik (@stevewojcik) on CodePen

[Carl]

Thanks for the demo. Very helpful.

 

I took a different approach

 

1. use addPause() to pause the timeline after each slide comes in
2. call a startTimer() function when paused
3. startTimer() uses delayedCall() to wait 2 seconds before calling checkResume() function
4. checkResume() tests if the mouse is over the button. if so the banner remains paused, if not the banner will resume.

 

the banner will only be paused when a full slide is present. the banner will resume as soon as the mouse leaves. 

 

var tl = new TimelineMax({paused: false});


tl.to(this.box, 1, { y:-250})
  .addPause("+=0", startTimer)
  .to(this.box, 1, {y:-500})
  .addPause("+=0", startTimer)
  .to(this.box, 1, {y:-750})
  .addPause("+=0", startTimer)
  .to(this.box, 1, {y:-1000})

this.button.addEventListener("mouseover", MouseOverHandler);
this.button.addEventListener("mouseout", MouseOutHandler);

var timer;

function startTimer(){
   console.log("timer restart")
   timer = TweenLite.delayedCall(2, checkResume);
}

function checkResume() {
  console.log("checkResume()");
  if(isOver){
    //if the mouse is over we do nothing for now
  } else {
    console.log("isOver == false so resume() timeline")
    tl.resume();
  }
}


//toggle value of isOver
function MouseOverHandler(e){
isOver = true;
}

function MouseOutHandler(e){
  isOver = false;
  console.log("mouseOutHandler called, let's resume()");
  tl.resume();
}

 

 

check out: http://codepen.io/GreenSock/pen/KzaoKa?editors=0010

 

 

[Carl]

also, i realized you were loading multiple versions of TimelineMax and CSSPlugin separated (some as old as version 17). 

I pulled in the latest version of TweenMax.

[Jonathan]

Really great slick solution Carl

[Woj]

Carl, you're the best. I would have never thought of that. Exactly what I needed.

[Carl]

Woj, you're welcome. Glad it worked.

 

Jonathan, I have to do something to keep up with your marathon of epic posts;)