Jump to content


Problem with making two divs animate on an onClick event.

Moderator Tag
Go to solution Solved by Carl,

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

So here I am, a JQuery user looking to switch to GSAP for animation. I have read some of the documentation and the tutorial videos. I searched for answers on the forums here and asked on stackoverflow.


Im trying for hours now to actually control the tweens like this:

There are two div classes, A and B. If A is clicked then both A and B have seperate animations.


Im not very good at explaining but if you see my codepen you will understand what I am trying to do. Switching from Jquery to GSAP wasnt as easy as I thought : (


What am I doing wrong?

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

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.


I'm having trouble matching up your description above with the code I see.

The problems in your code are mainly that you are creating 4 tweens named t at the exact same time that tell mostly the same elements to do different things.


Are you intending  to build a sequence of tweens, where one tween plays after the next? If so I would recommend using a timeline and watching these 2 videos:





I know GSAP is a little different than jQuery but I'm sure you will find it much easier to work with and 100x more powerful and flexible once you get some basics down. I think in this case if you create the animation you want in jQuery, there are lots of folks around that could very easily convert it for you. I'm sure what you are trying to do is fairly straight-forward, I'm just having a tough time understanding what that is. 

  • Like 2
Link to comment
Share on other sites

Im sorry for my hard to understand issue. I should have elaborated abit more. I did see the videos yesterday and read some parts of the manual but failed to find something that adresses the beforementioned issues which I will try to explain.


The problem I am currently facing is that Im trying to create two tweens. Both animate simultaniously when a div is clicked. Then reverse when the same div is clicked again. In addition I want more control over one of the two divs. So lets say the div is located right: 100% and I want it to animate to right: 0%, but when it reaches somewhere at 50% of the animations progress I want to animate the top value to 10% and then to 0 when the animation is completed.


Im kind of used to css3 animations and Jquery but I find GSAP more advanced. I know im missing something simple.


Here my updated codepen. It works a little but unfortunately you also have to click twice to make it fire the animation.


Didnt attach any external files since im new to codepen (im a jsfiddler)


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

Link to comment
Share on other sites

  • Solution

Maybe something like this?




I changed the ease to Linear on the first tween so that you can see that halfway through the first tween, the top will start animating to 50% (made it more noticeable than using 10%)

  • Like 1
Link to comment
Share on other sites

Dear Carl,


My appreciation, I am amazed of the results. Just how I imagined. I See the difference in my code and yours. One thing I noticed is yoyo, it seems it does the magic by returning something to its original state.

Why exactly does my code require two clicks and yours only one?


You also added



May I ask if the way im doing this by adding new timelines tl and ts is optimal? Do I have to add  tl.reversed() ? tl.play() : tl.reverse(); for every variable or is there a shorthand method?


One last question, how come no matter what I do the icon text does not rotate? This is especially true when I add a font-awesome icon.


ts.to('.fa', 2,  {rotation: 360})


Thank you very much for your time.

Link to comment
Share on other sites

Hi Demorus  :)


- i your original code you define if condition to check reveresed() , but there isn't any reversed timeline , so you need to reverse first as Carl's codepen .

statement ? (if true) : (if false) ;


- with timelines you can tween nx objects , you can merge these timeline to one .

in this case you can use Tweens too , its better to use timeline for complex tweens .


- be careful about variables naming .


- and for your text / font icons , add this in your css : .fa { display:block; } to make them tweenable

  • Like 1
Link to comment
Share on other sites

This is very interesting. I now understand it perfectly. Topic solved : )


Just one thing, GSAP claims to support even ie8 for rotating yet I see it outputs css3 transforms not supported in older browsers. When testing the code In ie8 mode (developer tools) rotates dont work, all other animations do such as positioning, color, width, height, etc. Is this normal?

Link to comment
Share on other sites

pls check that in standalone IE8 and that will work :)

When trying to view code on codepen in IE8, you need to make sure it is only in Full Mode view.

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.