Share Posted February 18, 2016 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
Share Posted February 19, 2016 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. 3 Link to post Share on other sites
Share Posted February 19, 2016 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: http://greensock.com/why-gsap/ https://css-tricks.com/myth-busting-css-animations-vs-javascript/ http://greensock.com/css-workflow/ http://greensock.com/transitions/ Happy tweening! 3 Link to post Share on other sites
Author Share Posted February 19, 2016 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
Share Posted February 19, 2016 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. 2 Link to post Share on other sites
Share Posted February 19, 2016 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! 3 Link to post Share on other sites
Share Posted February 19, 2016 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 Link to post Share on other sites
