Reverse SplitText animation on Click event

[Adveris 0 Likes (Newbie)]

Hello i'm trying to reverse the animation of my splittext onclick event, but the reverse doesn't work, any idea? 

 

$(window).on('load', splitMenu);

function splitMenu() {

	var st = new SplitText('.menu_line', {paused: true, type: 'words'});

	TweenMax.staggerFrom(st.words, 1, { y: 80, opacity: 0, delay: 0.4, ease:Power4.easeOut}, 0.04);

	$("menu_link").onclick = function() {
		st.reverse();
	};
}

See the Pen WpKLPR by AdverisTeam (@AdverisTeam) on CodePen

[PointC 8,599 Likes (Superhero)]

HI Adveris 

 

Welcome to the GreenSock forum and thanks for being a Club GreenSock member.

 

There are a couple things to correct. The first is that you were using an outdated version of SplitText which was wiping out your <a> tags when it split your copy. Using the current version will fix that. Here's an an excellent pen to bookmark for all the Club plugins and how to use them on CodePen.

 

See the Pen OPqpRJ by GreenSock (@GreenSock) on CodePen

 

The other issue is that there is no 'onclick' event handler in jQuery. That would be for plain JavaScript and I'd recommend that you use .addEventListener instead. So you could write it either way:

// plain JavaScript version
document.querySelector(".menuLink").addEventListener("click", function() {
  tl.reverse(0);
});

// jQuery version
$(".menuLink").click(function() {
    tl.reverse(0);
});

I made a fork of your pen with those updates. I would probably also recommend some other type of button to control the play()/reverse() of the SplitText timeline. As you have it now, once you click to reverse it, you have to run it again to see anything. Whereas a separate button would allow back and forth control. I'm assuming you made it this way just for testing, but thought I'd point that out.

 

Here's the fork of your pen:

 

See the Pen wJxNRy by PointC (@PointC) on CodePen

 

Hopefully that helps.

 

Happy tweening and welcome aboard.