Demorus

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?

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 tl.reverse(); ts.reverse(); 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.

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) http://codepen.io/anon/pen/OPJgrq

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?