First of all, creating smooth morphing shape animations is hard. But if you follow these ”best practices” you’ll find that your end results will get better and better. This first part is only 12 minutes long and I can promise you that you will get very far with this few tips and tricks. Good luck! ?
Why Keyshape?
We will be creating these with an app called Keyshape.
I prefer Keyshape for a number of reasons:
• Simple UI that resembles Sketch
• Really stable releases, getting better and better with each update
• Zero bugs! It just works man ?
• Affordable ?
• Support for plugins (we do love those plugins don’t we?) ?
Keyshape exports to lots of formats
Bottom line is you’ll find something that fits your purpose. Whether it’s for using in apps (Lottie, ADV, PNG Image Sequence), the web (SVG, KeyshapeJS, CSS animation) or even for your tutorial videos or blog (MP4, GIF) the app has you covered. Take that After Effects ha!
You will learn to do this????
Download these first
- Keyshape App (14 day trial version available for free)
- Tutorial assets
Video Tutorial Includes
– Introduction to morphing
– Best practices for exporting assets from Sketch
– Best practices for getting good morphing results in Keyshape
– Hands-on how to animate between states in Keyshape
– Preview it in your browser and edit the code directly
Approx 11.46 min running time
Part 1 Video Tutorial Highlights
(for really busy people ??)
That’s all folks!