Jump to content
GreenSock

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

Animation using GSAP and css3 together!

Go to solution Solved by Diaco,

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

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 comment
Share on other sites

  • Solution

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