Animation: How to make a video mockup

Have you ever wondered how the big companies make those mockup animations where a camera zooms in and out, and the phone rotates, typically at the end of an ad?

Here's an example from Apple:

Here's another example from the task management system Linear. This one is different.

Here’s how they are created: the company typically hires a 3D animation freelancer, who will model a phone in a 3D app like Cinema 4D or Blender. They then put screenshots or videos of your design on the 3D device's screen and then craft animations.

Your options

So, how can you get your hands on a slick mockup animation that showcases your app design in the best possible light?

Hiring an agency

As you can probably see, making 3D mockup videos often requires skills that are hard to learn. And the price reflects that. The best motion designers charge $20,000 for a project.

Wait. How much?

You’re probably thinking, “Okay, that sounds expensive.” 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 the business purpose you want. Is it more sales? Is it more downloads? To make your brand more widely known?
• Know your audience intimately. The agency will have a lot of questions about it.
• Don't be very specific about what you want the animation to look like. The superpower of the agency is that they've done this before, and they know what works for your specific purpose.
• But - be very specific about what you don't want, and why.
• Be very open and honest 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? What's your deadline? 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.
  

Do it yourself

You're probably naturally curious and eager to learn new things as a designer. That's great! Learning how to animate 3D objects is an insanely useful skill, and the work is so satisfying you'll have a hard time putting it down.

Luckily, many people on YouTube are ready to teach you how to do it.

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

In the recent years, traditional 2D video apps have gained 3D-like capabilities. We put together a few tutorials to get you started in 5 minutes

• 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. One is Rotato (you're on Rotato's site right now,) but 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. Spline has a free plan, and Blender is free and open source.

Whichever route you take, remember to have fun. If you rush through because you see mockup animations as a necessary evil, it's not worth it to go for the full learning experience. I founded Rotato while in this exact situation. 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.