Jump to content
Search Community

Reverse SplitText animation on Click event

Adveris test
Moderator Tag

Go to solution Solved by PointC,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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() {

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

Link to comment
Share on other sites

  • Solution

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() {

// jQuery version
$(".menuLink").click(function() {

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.
  • Create New...