Jump to content
GreenSock

Adveris

Reverse SplitText animation on Click event

Recommended Posts

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

Link to comment
Share on other sites

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.
:)
  • Like 2
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.
×