How to pause scrolling text using mouseenter

[tweeden36]

Hi, I am using the scrollToPlugin to scroll  text automatically when banner loads. I need the scroll to pause when mouse enters the area and resume when it leaves. I am a newbie that needs help. Like I said the text scrolls automatically when banner loads but when I mouseenter it doesn't pause. Here is a sample of the code that I am using to accomplish my goal. I used a console.log to make sure everything is firing but still the scrolling text doesn't pause on mouse enter. I hope someone can help me understand what I am doing wrong.

 

  <script>

 function init() {

  box.play();

}

 

var scroll = document.getElementById("box");

var _scrollDuration = 160;

var tl = new TimelineMax();

 

 

tl.add(TweenLite.delayedCall(.5, startAutoScroll, [box, _scrollDuration]));

scroll.addEventListener('mouseenter', function() {

  console.log('listening');

tl.paused(!tl.paused());

});

 

scroll.addEventListener('mouseleave', function() {

  console.log('listening');

  tl.paused(!tl.paused());

});

  </script>

[Dipscom]

Hi tweeden36,

 

We'll be more than happy to help. Could you provide a reduced case demo? It's much easier to troubleshoot code that is live and in context.

 

For example, I really can't understand why you adding a delayedCall() inside of your timeline.

 

Cheers!

 

[tweeden36]

Thank you for the response. here is my codepen 

See the Pen RppQZL by tweeden (@tweeden) on CodePen.

 

it animates in my banner but it isn't animating in codepen. Idon't know what I did wrong. Nevertheless how do I get the auto scroll to work properly and how do I mouse enter to pause the scroll and mouse leave to resume? Thank you for the help.

[Dipscom]

From what I can see here, you have a delayedCall that is calling a startAutoScroll function but I don't see it defined anywhere. Maybe that's why it works in your banner but not in CodePen?

 

Let me poke around a bit to see if I can get something working for you.

[Dipscom]

Here we go:

 

See the Pen aJJGoj?editors=1111 by dipscom (@dipscom) on CodePen.

 

Hope it helps.

[tweeden36]

Thank you Dipscom you are the MAN!!!!

 

This works perfectly.