Several animations on click event

[alextodea]

Hey there

 

Since I am rather an amateur, I find it difficult to resolve the following issue:

 

So I have this circle animation that moves on the left side of the page when clicked. Everything nice so far. 

 

However, the plan is to show the body of my page after I click and hide it again after I click the circle again, making the circle to come back on its initial size. I know that there should be some kind of procedure where i set some variables with the names of the div i want to show, but i do not know how to chain more animations and keep them under the click event that i have on the circle. 

 

The main idea of my website is that, when the user accesses it, he could see only the circle and, after he clicks it, the content of the page is showed.

 

Something similar to this website:   http://sergeymast.com/ (i know that most of his animations are in css but i want to improve my gsap skills along the way).

 

Thanks in advance for the help, I really appreciate it!

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

[Dipscom]

Hi alextodea,

 

Before trying to answer your question, I have a question of my own. Why?

 

Why would you want to impose another click gate onto the user before he/she can see the content? It is bad user experience. If you want to show off animation skills, look for something else to happen as the user is viewing the page. Use animation to guide your user, not to create obstacles.

 

Now for your question. This is more of  JavaScript question than a GSAP one but I guess it would not hurt to answer that.

 

In the Pen you linked, there was this line of code:

 

circle.click(function () {

 tl.reversed() ? tl.play() : tl.reverse();
});

To achieve what you want, all you need is to do something like this:

 

circle.click(function () {
 tl.reversed() ? optionOne() : optionTwo();
});


function optionOne() {
 tl.play();
 // Do the stuff you need
}


function optionTwo() {
 tl.reverse();
 // Do another set of stuff
}

The important bit to understand is the bellow. That is nothing but a shorthand version of an if/else statement:

tl.reversed() ? optionOne() : optionTwo();

isThisConditionTrue ? yesDoSomething : noDoSomethingElse

[Gardi]

Hello

Is it something like this?

See the Pen LNgboN by anon (@anon) on CodePen

 

Ps: please notice that, I'm showing the content while the button moves to position. If you feel like it should wait until it the button moves in to position, than simply delete the ",-=2"  parts from the code.

[PointC]

Hi alextodea 

 

I'd tend to agree with Dipscom about the need for extra obstacles for the user. As designers and developers, we can get so caught up in the 'cool' factor, we sometimes lose sight of what we're trying to accomplish. Today's users have the attention span of a hummingbird revved up on an overdose of caffeine so we need to show them something pretty quickly. Never underestimate the short attention span of the user. 

 

That being said, if you want to make something like the website you linked to, the easiest way would be to keep adding to the timeline I made for you in your other question as Gardi has shown. Your other option would be to create a separate content timeline in a function and call that when the button slide animation has finished. 

 

Happy tweening.