Return to initial state if clicked again

[alextodea 2 Likes (Newbie)]

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

[PointC 8,599 Likes (Superhero)]

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.

[alextodea 2 Likes (Newbie)]

Wow this was a fast reply!

 

Thanks a lot! 

[PointC 8,599 Likes (Superhero)]

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