How to make an animated mockup

Ever wonder how big companies create sleek ad animations to demo their products? They often feature bold camera movements, dynamic transitions, and perfectly timed music.

Here's an example from Apple:

And here's another example from the task management system Linear:

The process is actually not that complicated.

Usually, the company hires a 3D animation freelancer to do the job. They'd start by modeling a phone (or another device) in a 3D app, such as Cinema 4D or Blender. They then put screenshots or videos of your design on the 3D device's screen, before working on the animations.

But that's not the only route to take. Let's cover the different ways to create slick mockup animations to showcase your work—in the best possible light.

How to create a 3D animated mockup for free with Rotato

1. First, download, install, and open the Rotato App.
2. Pick a device and template.
3. Drag and drop your design file into the drop area.
4. Edit and preview your animation as desired.
5. Hit Render & Export to save your animated mockup.

Once that's done, your 3D mockup is ready to be shared with the world.

Our product was created to simplify 3d mockup creation for designers all over the world. Whether you're brushing up on that portfolio, need to showcase your work during a design critic session, or need to create sleek videos for the app stores, Rotato is your best friend. And yes, it's free to use.

If you've got too much on your plate, the other option is to find someone to help you with the dirty work. Options include:

Hiring an agency

As you can probably see, making 3D mockup videos often requires highly specialized skills. And the price reflects that. It's not common for the best motion designers to charge $20,000 for a project.

Wait. How much?

Let’s just be honest: it’s not cheap. According to the book The Freelance Manifesto, new freelancers charge $350 per day, and experienced ones go well beyond the $2,000 mark for each day they spend on the project, as cited in this article about becoming a motion designer.

Here are a few pointers for keeping the price down when working with an agency

• Be very specific about your business purpose. Is it more sales? More downloads? Or is it branding?
• Know your audience intimately. The agency will have a lot of questions, and you should know the answers.
• Don't be very specific about what you want the animation to look like. The superpower of an agency is that they've done this before, and they know what works for your specific purpose.
• But conversely—be very specific about what you don't want, and why.
• And lastly, be transparent about your budget. The agency needs this information to plan accordingly.

Even the entry-level price of $350 per day is beyond most budgets, especially if you’re a startup founder or a new grad putting together a portfolio. So what can you do? You can take your chances with a low-price freelancer from one of the freelance markets online.

Hiring a low-cost freelancer

There's a cheaper option if you're looking for someone else to do the work for you. Freelance marketplaces like Upwork and Fiverr list motion designers starting around $20/hr. And the good news is, it just might work. It also might be a terrible waste of time as you cannot know if they are the experts they claim to be. Don't get me wrong, many of them are, but anyone can register.

A few hard-earned tips:

• Find the freelancer yourself rather than hiring those who contact you after you post your job.
• Don't hire those who get in touch seconds after you post your job.
• Give them a small task to see if they deliver and you like working with them.
• Be extremely specific about what you want; mock up the keyframes in Figma.
• Give them a "manual" for how to work with you. How fast do you want them to respond, your deadline, and how often should they check in with you.
• Start with a small and simple task and see how well they handle it. Then, slowly expand with tasks that require more creativity.
• Hire more than one if you're in a rush.

Sticking to doing it yourself

Designers are naturally curious humans who love learning new skills.

So if you want to (eventually) create your animation work yourself some day, that's great! Mastering how to animate 3D objects is a valuable skill, and the process is so rewarding you might find it hard to stop.

How to start? There is already a lot of great content on YouTube. Here are a few:

• How to make animated mockups in Premiere Pro
• Learn 3D modeling from scratch with Blender Guru

In recent years, traditional 2D video apps have gained 3D-like capabilities. Here are a few tutorials to help get you started:

• Animate a mockup in Premiere
• Animate a mockup in After Effects

There are also lots of templates for After Effects and Apple Motion. One of the biggest collections is from Envato.

Just have fun

While 3D is a fun and useful skill, most of us don't have the time, money, or patience for that learning curve. But the good news is that easier 3D modeling and animation are starting to appear.

You can always rely on our product, Rotato, to get you started. If you want to go a step deeper and get your hands dirty with making 3D models in a modern web environment, look at Spline or the Blender course above. Blender is free and open-source; Spline comes with a free plan as well.

Whichever route you take, remember to have fun. If you rush through because you see mockup animations as a bottleneck to your project, it's not worth it to go for the full learning experience.

I was in this exact same situation when I founded our company, Rotato. I was in a hurry, my focus was on building, and I just couldn't find a solution that could give me the best of both worlds while I could have fun at the same time. But here we are!

Give Rotato a try if you haven't, and good luck with your project.