It’s been nearly 10 years since Steve Jobs killed Flash and the web industry had to scramble for “standards-based” animation solutions.

To fill the void we’ve seen the rise of:

• CSS Animations and Transitions
• Web Animations API (WAAPI)
• GreenSock Animation Platform (GSAP)
• A plethora of JavaScript utilities that favor small file size over features

If you’ve followed me for more than 3 seconds you know I have a strong bias towards the GreenSock Animation Platform. I worked for GreenSock for around 7 years and have seen every need of professional animators addressed in the GreenSock support forums.

It would be easy for me to offer fairly complex challenges that are impossible with other tools.

I’ve decided a different approach. Let’s see how well tools that have had 10 years to mature can handle fairly simple animation sequencing tasks.

What I’ll be looking for

I’ve designed a series of animation challenges that will allow us all to see which tools an animator can rely on for:

• cross-browser consistency
• flexibility in response to client demands
• readability by other developers

Each challenge will build upon the previous challenge’s solution.

Throughout the challenges I will be playing the role of the annoying client that always wants something new.

Challenge 1: Animate in and out

We are going to start with a very basic animation

• 2 things animate in from opposing directions
• They stay still for 1 second
• They animate out in opposing directions

Below is a looping gif of the finished animation for this stage. This challenge only requires 1 iteration (no repeats).

The starter pen below has very specific instructions for the timing.

How to participate

• Click the Edit on CodePen button in top nav of the demo above top open it in a new window.
• Click on the Fork button in the lower right navigation bar to make your own copy.
• Add your code.
• Save the pen.
• Post the URL of your saved pen on twitter and tag @snorkltv (follow me for challenge updates)

Be sure to save your pen as it will be the starting point of the next challenge!

Full transparency

I’m doing these challenges for 3 main reasons:

• Expose the difficulties associated with CSS and WAAPI.
• Allow my students to have an opportunity to practice what I have taught.
• Attract more people to my nearly-free online GreenSock training.

I’m also opening myself up to be educated on my lack of understanding of these other tools.  I admittedly gave up on using any of them many years ago.

Although my intentions are to prove GSAP to be superior I have am not here to make fun of people or shame anyone and their code. I’m looking for a clean and fun head-to-head battle.

Before making this challenge public I shared it with the Animation At Work Slack group.  Stephen Shaw (@shshaw), Louis Hoebregts (@mamboleoo), and Jhey (@jh3yy) all quickly jumped in with different solutions showing very clever ways to approach this. Big thanks to them as I am already learning from their solutions.

Do yourself a favor and follow them all on twitter. They are awesome animators and developers.

I look forward to reviewing your solutions and presenting you with my first annoying client change request!

Carl