SplitText onmouseover / onmouseenter triggers multiple times

[kakarlus]

Hello,

 

I have this SplitText on my text which is a link basically. Sadly it triggers multiple times. Any help is appreciated.

$(".info a").on({
    mouseenter: function(e) {
    	trace("mouseover");
      e.preventDefault();
      var tl = new TimelineMax, 
			mySplitText = new SplitText($(this), {type:"chars"}), 
			chars = mySplitText.chars; 
			tl.staggerFromTo(chars, .03, {color:"#ffffff"}, {color:"#e6aa06"}, 0.03);
			tl.staggerTo(chars, .03, {color:"#ffffff"}, 0.03);
    },
    mouseleave: function(e) {
    	trace("mouseout");
      e.preventDefault();
      var tl = new TimelineMax, 
			mySplitText = new SplitText($(this), {type:"chars"}), 
			chars = mySplitText.chars; 
			tl.staggerFromTo(chars, .03, {color:"#ffffff"}, {color:"#e6aa06"}, 0.03);
			tl.staggerTo(chars, .03, {color:"#ffffff"}, 0.03);
    }
	});

thanks,

Carlos

[Diaco]

Hi kakarlus 

 

i think you should put the SplitText function out of hover scope , since you only need that once .

 try something like this :

var tl ,
mySplitText = new SplitText($(".info a"), {type:"chars"}), 
chars = mySplitText.chars; 

$(".info a").hover(over ,out );
function over(){
    tl = new TimelineMax ;
    tl.staggerFromTo(chars, .03, {color:"#ffffff"}, {color:"#e6aa06"}, 0.03)
    .staggerTo(chars, .03, {color:"#ffffff"}, 0.03); 
}  
function out(){
    tl.restart();
}  

Edit : oooops .. i missed the TimelineMax , thanks Carl 

[Carl]

Yup, Diaco is exactly right, no need to split the text each time you hover, its already been done.

 

Depending on the effect you want, I would go one step further and also create the timeline once out of scope of the hover like so

var tl ,
mySplitText = new SplitText($(".info a"), {type:"chars"}), 
chars = mySplitText.chars; 

//create the timeline once in paused state
 tl = new TimelineMax({paused:true}) ;
    tl.staggerFromTo(chars, .03, {color:"#ffffff"}, {color:"#e6aa06"}, 0.03)
    .staggerTo(chars, .03, {color:"#ffffff"}, 0.03); 

$(".info a").hover(over ,out );
function over(){
   tl.play();
}  
function out(){
    tl.restart();
} 

 now you just need to play() / pause() on over / out.

[kakarlus]

i see, it makes sense. poor algorithm sorry thanks both