Design + Sketch App — Medium | Designforventures.co

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

1. Keyshape App (14 day trial version available for free)
2. 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 😋🌴)

Make sure to find similar shapes, that brings better morphing resultsYou can skip this counting in Sketch but make sure to keep this one in mindAlways export the artboards!Keep checking those anchor points in KeyshapeColor coding helps!You need same amount of nodes in all shapes you want to morph betweenUse the Pen Tool to add/subtract shapesSet Start Node makes or breaks a good morph

That’s all folks!

Morphing SVG Icons with Keyshape and Sketch — Part 1 was originally published in Design + Sketch on Medium, where people are continuing the conversation by highlighting and responding to this story.