Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Sign in to follow this  
alextodea

Return to initial state if clicked again

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 post
Share on other sites

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 post
Share on other sites

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

  • Like 3
Link to post
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
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×