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

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.

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!

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!

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.

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.

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.

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. 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: 🙂

4864

Related Projects

• 100 Awwwards Websites Deconstructed
• Happy 25th Birthday Gameboy
• Happy New Year 2016
• Merry SVG Christmas and Happy New Year
• Merry Christmallax

Conclusion

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.