Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Vahid-Designer

Animation using GSAP and css3 together!

Recommended Posts

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.


Link to post
Share on other sites

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 :
 
 
 
 
  • Like 4
Link to post
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.

×