Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
galahad9gr

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

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

Well, we can't do your work for you. But if you have a specific question with implementing something feel free to post!

 

With that being said, if you look around this forum, you can find a lot of posts like this one which show examples of a 3D card flip using GSAP.

  • Like 2
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.

×