What if you had the power to animate any logo? Imagine being able to animate your company logo – without a motion designer, without complex software, and within the span of a toilet break.
Well, you can with LottieFiles. Here’s how to animate any logo without Adobe After Effects, just by using the SVG to Lottie tool.
Watch the video: Animate any logo without Adobe After Effects
Watch the video tutorial below, or scroll downwards for a written version. To follow along, you can download the exercise files here.
1. Optional: creating a logo from scratch in Figma
If you don’t already have a logo, you can create one to experiment with in Figma. Here’s how to create a quick one from scratch in Figma:
- Press ‘P’ to switch to the pen tool.
- Use the pen tool to draw a squiggly line (as you’ll see later, the animation will follow the stroke path of this line).
- Change the stroke thickness from one to 36.
- Change the stroke color to #3C48F6.
- Add a company name next to it.
- Select your logo layers and group them.
- Export it as an SVG file and save it.
2. Drag and drop into LottieFiles' SVG to Lottie Tool
Head to the LottieFiles’ SVG to Lottie tool. Drag the SVG file and drop it into the tool.
Next, you’ll see a variety of animation options. In this example, we’ll select this option – but feel free to experiment to see which suits your logo the best.
And there it is! Your own animated logo, without Adobe After Effects, in a minute of work.
3. Save your animation
To save your animation, click “Download Lottie” or click “Upload to Preview” to save this to your private animation dashboard.
What if you already have a logo?
Have an existing SVG logo you’d like to animate? Drag it directly into the SVG to Lottie tool and try out different animations.
To have more control over the animation, you can also edit in Figma. For example, let’s take the LottieFiles logo and drop it into Figma.
We’ll make these edits:
- Select the LottieFiles icon and add a stroke with the color #24E2E5.
- Delete the color fill.
- Export the logo as an SVG.
Drag it into the SVG to Lottie tool, and boom – here’s our animated logo.
You may see some minor details that don’t animate properly. In this example, the ‘e’ is filled in. To fix these small details, you may be able to edit the SVG file in Figma and use Boolean operations to remove areas you don’t want in your logo.
For complex and customized animations, you may need to fire up software like Adobe After Effects. But if you aren’t a motion designer – or you just have a minute to spare – then using the SVG to Lottie tool is a great way to animate your logo.
Want to learn more about adding motion magic to your designs? Check out other tutorials on our blog, learn from Lottie experts through free courses, or head to our YouTube channel!
