Jump to content


Return to initial state if clicked again

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

Hey guys!


I am fairly new to GSAP and i am learning it by building stuff. I have an svg in the middle of the page and i would like it to animate to the left and then display the content of the page (which i did not coded yet). When the user clicks it again, i would like to return to its initial state and hide the content of the page. Throughout the past few hours, I tried various on click functions with if else statements but nothing seems to work. With the show/hide part of the content i will deal with it later, for the moment i would like to learn how to fix the clicking part. Thanks in advance!

See the Pen xVJwXp by alextodea (@alextodea) on CodePen

Link to comment
Share on other sites

  • Solution

Hi alextodea :)


Welcome to the forums.


If I understand your question correctly, you'd like the svg (x in a circle) to move one way on click and then reverse on click again? There would be a few ways to do that, but I'd probably just set up a timeline and play/reverse it on click. Something like this could work:

var circle = $('svg'),
    tl = new TimelineLite({paused:true, reversed:true});

tl.to (circle, 2, {left:'20px'});

circle.click(function () {
     tl.reversed() ? tl.play() : tl.reverse();

Here's a fork of your pen with that solution:

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


Hopefully that helps a bit.


Happy tweening and welcome aboard.


  • Like 2
Link to comment
Share on other sites

Wow this was a fast reply!


Thanks a lot! 

  • Like 2
Link to comment
Share on other sites

That's how we roll here in the GreenSock neighborhood.  ;-)  

  • Like 3
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.