7 Tips For Better Animation Workflow

7 Tips For Better Animation Workflow

What steps do I go through in planning my animations? Find out from these 7 simple tips.

7 Tips For Better Animation Workflow

  1. Keep your tools simple
  2. Create a simple storyboard
  3. Be flexible
  4. Experiment in the browser
  5. Know your tools
  6. Get regular feedback
  7. Have fun

7 Tips For Better Animation Workflow

1. Keep Your Tools Simple

The first step is to sketch out the animation idea on a piece of paper.

I prefer to stay offline and go away from the computer while sketching the initial idea.

This eliminates any distractions and lets you focus on creating a simple storyboard.

7 Tips For Better Animation Workflow

2. Create A Simple Storyboard

Outlining the starting, ending frame and a few frames in between is a very important step that gives you the necessary clarity before you start coding.

Just spending 5-10 minutes on a smaller animation concept can save you hours of coding and experimenting in the browser.

You might need to breakdown larger concepts in a smaller pieces.

How many? As many as you need to be comfortable jumping into the code.

Don’t let your poor drawing skills stop you from storyboarding, it’s not about beauty, it’s about a clarity in your head!

7 Tips For Better Animation Workflow

3. Be Flexible

Of course not everything from your initial ideal will make the final project.

Be flexible to adjust and tweak your concept based on how it looks, works and feels in the browser.

Use the storyboard as a guide only!

7 Tips For Better Animation Workflow

4. Experiment In The Browser

Even the best storyboard in the world won’t make your animation stand out.

You need to experiment in the browser and carefully fine-tune your positioning, timing and easing.

Also breaking larger elements into smaller pieces and animating them separately will help your animation to feel more crafted.

7 Tips For Better Animation Workflow

5. Know Your Tools

You might have the best idea in the world, but if you try to animate margin-left instead of translateX, or if you have no idea what transform-origin does, you will be lost.

Mastering your tools is the key to a beautiful animations.

Do you want to master GreenSock or ScrollMagic? GreenSock 101 and ScrollMagic 101 are a good place to start.

GreenSock 101 - Premium GreenSock Tutorials - Sign Up Now!

ScrollMagic 101 - Premium ScrollMagic Tutorials - Sign Up Now!

Remember: practice makes perfect so don’t expect to create an award winning animation with your first project.

Instead listen carefully to all the feedback you get, evaluate it and learn from it.

7 Tips For Better Animation Workflow

6. Get Regular Feedback

One of the easiest ways to improve your animations is to show your work (WIP – work in progress) to a colleague or friend.

This will give you more time to precisely fine-tune everything before the deadline.

If you only show the final project, you might be surprised how many things you need to tweak (timing especially) and you will definitely feel overwhelmed and stressed.

7 Tips For Better Animation Workflow

7. Have Fun

This is not a tip, having fun is a must.

If you are not enjoying what you are creating, it will show on the final animation.

I had a ball creating some of my best animations, so make sure you enjoy your project from start to finish too!

If you are not smiling while coding it, nobody will smile looking at your animation. Guaranteed!

I am wondering how much fun Chris Gannon is having while working on demos like this: 🙂


Related Projects


And what about you, how does your animation workflow looks like?

What would you suggest to anyone who wants to better plan and execute their animations?

Let me know in the comments.

Download Free Toolkit

All you need to know to get started with GreenSock and ScrollMagic, in one single package. Straight into your inbox.

100% Privacy. Guaranteed! Powered by ConvertKit

3 thoughts on “7 Tips For Better Animation Workflow

  1. Norman Dubois

    Pretty cool! Very interesting read! I think I’ve to stick with your workflow in my next bigger animation! Thanks for sharing Petr 🙂

      1. Norman Dubois

        I’m just doing my animations in the browser. But my animations are not as awesome as yours… 😀 I’m just tweening some simple stuff, so currently I’m ok with this workflow. I think I’ll try your workflow on my next more advanced animation 🙂



Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.