What steps do I go through in planning my animations? Find out from these 7 simple tips.
7 Tips For Better Animation Workflow
- Keep your tools simple
- Create a simple storyboard
- Be flexible
- Experiment in the browser
- Know your tools
- Get regular feedback
- 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.
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: 🙂
- 100 Awwwards Websites Deconstructed
- Happy 25th Birthday Gameboy
- Happy New Year 2016
- Merry SVG Christmas and Happy New Year
- Merry Christmallax
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.