Say that you suddenly need to make a loading animation for the app you’re making. Instead of spending hours and hours perfecting it I would do this instead:

• Browse around a while for inspiration on Lottiefiles.com
• Find something that works, then download the JSON file
• Side note 👉 🗒️ Make sure you download the Keyshape Lottie plugin, or you will not be able to import or export animations using the Lottie file format
• Jump into Keyshape, choose Open and if you’re lucky, the animation looks like the one on the website
• Use Paste Shape to replace the graphics with your own

What is Paste Shape?

The technique I use for quickly reusing nice animations is something called Paste Shape in Keyshape (Edit 👉 Paste Shape). That way you don’t mess with the animation data, you just replace the graphics. In After Effects there’s a similar trick to do exactly this, but hey this isn’t an After Effects tutorial 😺

Here’s how the original loading animation looks like:

So, what I’m going to do here is replacing those dots with my graphics, in this particular case the Sketch and Figma logotypes. We’re probably going to use this animation in the next version of Stratos Tokens 2021, yummy 🤖 💪

1. First make sure you have exported the graphic/s as SVG/s
2. Open the SVG/s inside Keyshape in another window, as a separate Keyshape file. This makes this whole process easier, and you can always go back if things start look wonky, which sometimes happens!
3. Select the graphic layer with the Selection Tool (V) and copy to clipboard memory (⌘C)
4. Go to the Keyshape file that has the animation that you want to reuse and select the animated layer, again using the Selection tool.
5. Go to Edit 👉Paste Shape and 💥

A couple of things will most probably happen:

1. Your own graphic is way to big
2. The anchor point is different so it will be placed maybe even outside the canvas
3. You will inherit some of the styling from the shape you just replaced

This can be both frustrating but also really interesting. Just take away the things you don’t need/want and keep the ones that look cool 😎 👍

The two first issues are quickly fixed using the Selection tool, just make sure you don’t have Enable Auto-Keyframing activated (Q) or every move you make will get recorded 😆 👎

A couple of happy accidents later made the final animation look like this:

That’s all folks, have a great week