How did you convince your front end team to stop using CSS and go greensock

[alwayzambitious 54 Likes (Contributor)]

How do you convince your front end team to stop using CSS animation and use greensocok instead.

I've tried and tried and the feedback I got was that it taxes the CPU of phones on Mobile sites... even though thats not neccesarily the case, can someone offer strategies that have worked...

Ive sent them here... 

https://css-tricks.com/myth-busting-css-animations-vs-javascript/

 

[GreenSock 8,117 Likes (Superhero)]

That's a great question, alwayzambitious (such an appropriate name, by the way)

 

I'd offer a few suggestions:

1. Don't make it "all-or-nothing". The truth is that in some cases, CSS transitions are perfectly adequate and it's not critical to push for GSAP on every...single...animation. If your coworkers sense that you're being an extreme-ist, they are more likely to close off to your suggestions. That being said, there is some value in having everything GSAP-driven (even simpler things) because it'd allow you to do some nifty stuff like globally control the timescale of EVERY animation. Like set the global time scale to 10 to make all the animations go a lot faster, or 0.1 to go slower and really focus on what's going on. Can't do that with CSS. Also, you can do nifty effects like pausing or slowing down all animations when a modal window animates into place. We do that on our home page - click the "Download GSAP" button and notice that the main animation at the top pauses, and then resumes when you close the modal. Super easy if everything is built on GSAP. Impossible if you have a mish-mash. 
2. Point them to http://greensock.com/why-gsap/
3. The mobile phone performance thing is interesting. It's a very common misunderstanding, as that article you linked to points out. EVERY SINGLE mobile device I tested was actually FASTER with GSAP for everything except transforms on iOS, but there are other tradeoffs as I describe here: http://greensock.com/css-performance/. I'd definitely ask them to watch that video. Make sure they know that GSAP GPU-accelerates transforms much like CSS does. That's the real key for mobile devices. 
4. In my opinion, one of the most compelling reasons to use GSAP over CSS is the fact that it gives you independent control over transform components. I mean, seriously, what animator doesn't want to animate position, scale, or rotation? With CSS, those are all mashed into one property, limiting what you can do. 
5. Realize that it's difficult to explain to the uninitiated - lists of features don't really do it justice. It's not merely about performance (although that's a biggie) - it's about feeling empowered to animate almost anything you can imagine with minimal code. Most people who take the time to learn GSAP have a "light bulb" moment pretty quickly and never want to go back to CSS or other libraries. It never boils down to one key thing - it's a bunch of stuff that adds up. It's a feeling. A confidence. A freedom. If your coworkers only do some basic fades/rollovers and simplistic stuff, they'll probably never understand why GSAP is cool. You won't be able to convince them. Quite frankly, I'd agree that GSAP isn't really ideal for them and that's fine. CSS is a perfectly adequate solution in many cases for simplistic stuff. 

Does that help at all? 

 

Again, I'd say the best single resource might be http://greensock.com/why-gsap/ and if they're stuck on the CSS performance thing, maybe have them watch http://greensock.com/css-performance/ and perhaps do some tests of their own comparing CSS and GSAP. 

[alwayzambitious 54 Likes (Contributor)]

This was very comprehensive, thank you for this!

[blippar 0 Likes (Newbie)]

 

never want to go back to CSS or other libraries

 

Hehe.

 

True.

[somascope 5 Likes (Newbie)]

Like Jack's point #1, the way we communicate our ideas is such an important facet in team collaboration. And when the conversation is about process/workflow/tooling, people can be fairly protective. A thought that comes to mind is taking one of the creatives you guys have done, or a small piece of a previous/current project, and re-animating what was previously done with CSS with GSAP - do that on your time. Maybe showing them a working example that they don't have to put any effort or time into can help bridge any communication issues, or be something that is a gentle nudge now, but helps moving the ball closer to GSAP integration in future projects. Good luck!

[Ihatetomatoes 147 Likes (Specialist)]

@alwayzambitious, I wouldn't try to convince the whole team to stop using CSS for animations, instead try to find a creative ways how to get the best out of both worlds.

 

The power and flexibility is in combining CSS and JS, not in using just one of these methods.

 

It might be tricky at the start to recognise when to use CSS and when to use GSAP, but practice makes perfect.

 

For me the biggest 'selling' points for using GSAP are:

• it saves me a lot of time dealing with cross-browser inconsistencies 
• more complex animations can be done much quicker and with less code
• the GSAP workflow enables me to be more creative and saves a lot time too

If the article didn't convince your team, then try to send them to the GreenSock Showcase or click through the latest winners on Awwwards.com.

 

That has some impressive examples and will surely convince even the most sceptical developer and designers, that looking into GSAP is a wise move.