Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
tweeden36

How to pause scrolling text using mouseenter

Recommended Posts

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>
Link to comment
Share on other sites

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!

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

Thank you Dipscom you are the MAN!!!!

 

This works perfectly.

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.
×