Animation using GSAP and css3 together!

[Vahid-Designer 0 Likes (Newbie)]

I'm trying to animate elements in my webpage by using css3 and gsap library. One of my elements which is my menu item has the following code in css3:

.loaded .main-menu .item:nth-child(1){

top:calc(50% - 25px);

left:calc(50% - 25px);

background-color:green;

opacity:0;

-webkit-animation:moveicon1 1s forwards cubic-bezier(0.42, 0, 0.05, 1.87);

-moz-animation:moveicon1 1s forwards cubic-bezier(0.42, 0, 0.05, 1.87);

-o-animation:moveicon1 1s forwards cubic-bezier(0.42, 0, 0.05, 1.87);

animation:moveicon1 1s forwards cubic-bezier(0.42, 0, 0.05, 1.87);

}


@keyframes moveicon1{

100%{-ms-transform:translate(0px,-160px) rotate(360deg);

-o-transform:translate(0px,-160px) rotate(360deg);

-moz-transform:translate(0px,-160px) rotate(360deg);

-webkit-transform:translate(0px,-160px) rotate(360deg);

transform:translate(0px,-160px) rotate(360deg);

opacity:0.8;}

}

I've done above for all prefixes. And the other hand I wrote these code via gsap based on following code:

TweenLite.to('.loaded .main-menu .item:nth-child(1)', 1, {x:0,z:0,y:-160,rotation:360,opacity:0.8, ease:Back.easeOut});

An idea to use both together is using gsap when css3 is not define in client's browser. But I don't want to do it, because gsap has the very good speed. Unfortunately when I use both on same element, browsers who support css3 doesn't animate good via gsap.

if (!Modernizr.cssanimations){

// GSAP Codes

}

I know that gsap and css3 has the same speed But the question is can I use both together and browser run each one that has more speed. So like when the laptop is in Power Saver mode , run the gsap (because its faster in this situation) and when javascript is off run the css3. If it's not possible, help me to recognize when I should use which one? Javascript or css3? Thanks a lot.

[Diaco 1,948 Likes (Superhero)]

Hi Vahid-Designer 

 

Nope , you can't use Gsap Tweens and CSS animations/transitions together for same element .

 

and about ' Javascript tweens vs css3 animations ' , pls check these posts :

 

https://css-tricks.com/myth-busting-css-animations-vs-javascript/

 

http://greensock.com/transitions/

 

http://greensock.com/css-performance

 

http://greensock.com/css-workflow/

[GreenSock 8,117 Likes (Superhero)]

I saw the cross-post on StackOverflow: http://stackoverflow.com/questions/34837316/using-two-types-of-animation-together (Tahir shared his thoughts there)