Jump to content
Search Community

Is GSAP for this animation type better than pure CSS/Jquery?

galahad9gr test
Moderator Tag

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

Dear reader

 

A programmer with Microsoft Certification spent >15 hours on a "turning-card" animation similar to this benchmark:

http://css3playground.com/3d-flip-cards/

The programmer  told me that it is best to do all with CSS to get maximum compatibility.

 

I got the (maybe wrong) feeling it should have been done with GSAP and he never mentioned it while doing the software consulting.

Please open this link and tell me whether the animation "Swing like a gate" could be done in GSAP and whether it would still be cross-compatible on all modern browsers as well as mobile responsible on Ipad, Iphone (Safari).

 

Please help me,

Matt

 

If someone is interested in a job please 

contact me back.

 

Link to comment
Share on other sites

GSAP actually reaches more browsers than CSS animations! All the way back to IE6 according to the main page. Sometimes it requires using Modernizr along with it for feature detection, but either way it works on more browsers than CSS animations. So whoever you were talking to is mistaken.

 

The only case when CSS animation would show when GSAP wouldn't is if a user chooses to have JavaScript disabled which is a very, very small percent of people.

  • Like 3
Link to comment
Share on other sites

Yep, Zach is exactly right. In fact, GSAP is more compatible than CSS animations. It even works in IE8 (although we may remove that in an upcoming version in order to streamline things and almost nobody uses IE8 anymore). CSS animations don't work in certain browsers on SVG transforms, and [as you probably discovered] they're much more difficult to work with and edit/maintain. 

 

So not only does GSAP offer better performance, but it can do a whole lot more than CSS animations: better easing (Elastic, Bounce, Rough, SlowMo), independent control of transform components, animating along a path, morphing SVG shapes, scroll-based animation, runtime controls, and lots more. See the following articles:

  1. http://greensock.com/why-gsap/
  2. https://css-tricks.com/myth-busting-css-animations-vs-javascript/
  3. http://greensock.com/css-workflow/
  4. http://greensock.com/transitions/

Happy tweening!

  • Like 3
Link to comment
Share on other sites

Hello everybody

Thanks for your quicky replies.

 

Question: 

Where do I find someone who can with ease create the transition "Swing like a gate" http://css3playground.com/3d-flip-cards/

with Greensock? When one opens the link in an ipad it won't work well.

How difficult is it to do it in Greensock? So far I never saw something complex like this in Greensock.

If someone knows please message me back.

Matt

 

PS:

@Zach: 

See the Pen JGRdrN by Zeaklous (@Zeaklous) on CodePen

It comes closest to what I need. Please contact me on gmail: mattparo

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.
×
×
  • Create New...