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

[galahad9gr 0 Likes (Newbie)]

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.

 

[ZachSaucier 7,162 Likes (Superhero)]

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.

[GreenSock 18,886 Likes (Superhero)]

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!

[galahad9gr 0 Likes (Newbie)]

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

[ZachSaucier 7,162 Likes (Superhero)]

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.

[Jonathan 5,394 Likes (Superhero)]

Hello galahad9gr, and Welcome to the GreenSock Forum!

 

Here is a simple GSAP 3D Swinging Door Card Flip,

 

See the Pen NxVMBx by jonathan (@jonathan) on CodePen

 

And another GSAP 3D Card Flip

 

See the Pen qELxVq by jonathan (@jonathan) on CodePen

 

Those should hopefully help!

 

[Jonathan 5,394 Likes (Superhero)]

And here is a GSAP card scaleX on hover like in ZachSaucier CSS only codepen from above

 

See the Pen obRyBr by jonathan (@jonathan) on CodePen