Jump to content
Search Community

Several animations on click event

alextodea test
Moderator Tag

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 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

Link to comment
Share on other sites

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() {
 // Do the stuff you need

function optionTwo() {
 // 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
  • Like 3
Link to comment
Share on other sites


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.

  • Like 2
Link to comment
Share on other sites

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.


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