Animation is no longer only for the film and motion design industry. It's become an essential tool for marketers, graphic designers, and UI/UX designers. Many companies have realized the value of animated assets in bringing their brands to life and engaging their audiences.

In this tutorial, we'll walk you through how easy it is to start animating with Linearity Move. We'll focus on turning a static announcement post into an eye-catching animation for social media and email.

Do you find the idea of learning how to animate daunting? Don’t worry. If you know how to use design software, you can animate with Move. It’ll take a few minutes, we promise.

Bring motion in-house

Animate marketing assets in seconds with Linearity Move.

Get started
Linearity Linearity

How to animate as a beginner

Animation skills can be mastered with practice, patience, and a bit of creativity. Here's a straightforward guide to help you get animation basics right:

1. Grasp the basics

Understand the core idea of animation: creating the illusion of movement by sequencing still images. Familiarize yourself with fundamental principles like timing, spacing, and ease-in and ease-out.

Check out our handy guide on the 12 principles of animation (with examples).

2. Pick easy-to-use software

If you’re a first-time animator, choose beginner-friendly animation software. Linearity Move is a great springboard for graphic designers and marketers wanting to animate design assets.

The intuitive interface and Auto Animate feature means you’ll get professional-grade results in a few clicks.

3. Start small

Kick off with straightforward projects. Animating your brand’s logo or adding some movement to a social media post will help you get to grips with animation software.

From there, your imagination is the limit.

4. Master keyframes

Learn about keyframes, which are critical for defining the start and end points of any motion in your animation. Experimenting with keyframes teaches you how to control the timing and flow of your animations.

Note that many beginner or marketing-focused animation software lack keyframing features. This may seem to make animating your assets easier initially, but later you may grow frustrated when you need more advanced features.

Linearity Move hits that sweet spot between ease of use and complete control.

5. Practice and get feedback

Be brave and bold. Try new ways to bring brand stories to life with animation and seek feedback from your team. You can also share your designs and animations with our Linearity community to get tips.

Constructive criticism can help you improve, and observing others' work can inspire you to try new things.

In the spirit of trying new things, let’s start with our step-by-step animation tutorial.

Step 1

Create a new Curve document

Linearity Move <3 Linearity Curve. Our software platforms work seamlessly together to make the switch from design to animation virtually frictionless. If you haven’t already, go ahead and download Curve onto your Mac, iPad, or iPhone.

Jumpstart your ideas with Linearity Curve

Take your designs to the next level.

For this tutorial, we’ll be using the Linearity software suite on an iPad.

You can fast-forward your announcement post design using one of our free templates. Download the one below or browse our Templates Library.

To create a new Curve document, go to your downloads folder and open the .curve template file. It’ll automatically appear in your Homescreen Gallery in Curve.

Linearity Curve Homescreen Gallery
Step 2

Customize your announcement design

Linearity templates are completely customizable. You can change the background, font, colors, add or delete elements, or add effects.

To change the Artboard size (the final export size), tap on the name of the Artboard or its border to select it. Then, tap on the Quick Settings button (three dots) in the Action bar at the top of the screen.

Select the Artboard & Grid option, and then set the width and height of your Artboard.

Linearity Curve Artboard size

Changing the font and updating the text is easy. Select the text and go to the Text section in the Style Tab on the right. Here, you can choose the Font, Type, Size, Letter Spacing, and more.

Linearity Curve change font

Update the text by double-tapping on the textbox, or select the Text Tool in the Toolbar on the left and tap on the text.

Type your announcement and choose the Selection Tool once done to continue editing your design.

Linearity Curve add text

Once you’re happy with the look and feel of your static announcement post, it’s time to prepare the Artboards for your animation.

Step 3

Prepare your animation storyboard

Linearity Move is revolutionary. You can prepare a few key designs, import them into Move, and it will generate the transitions for you. This feature is called Auto Animate.

In your Curve design document, go to the Layers Tab and long-press your Artboard layer for more options. Select Duplicate to create a copy of your Artboard and all its design elements.

Linearity Curve duplicate Artboard

We want each row of shapes to fly in separately, so make three duplicate Artboards—one for each keyframe.

Note that all the layers should keep their names. This helps Move distinguish what happens to the objects between each frame.
Linearity Curve creating storyboard for Linearity Move

Now, you can adjust the designs to create a storyboard for Move. On Slide 1, use Multi Select Mode to select the shapes and drag them out of the frame or Artboard.

Linearity Curve design storyboard for animation

On Slide 2, select only the top two rows of shapes and move them out of view. Slide 3 will have two visible rows, and Slide 4 will have all 3 rows of shapes in their final position.

Linearity Curve Artboard preparation for Linearity Move

No need to export these files into another format. You can simply close Linearity Curve.

Step 4

Auto Animate your announcement post in Move

If you haven’t already, download Move below:

Bring motion in-house

Animate marketing assets in seconds with Linearity Move.

Get started
Linearity Linearity

Open Linearity Move. You’ll see your Curve design in the Homescreen Gallery. Tap on the design to upload it to Move.

Linearity Move Homescreen

Once it’s been uploaded, tap on it again to open in Move. The Import modal will appear. Select all four of your Curve Artboards and drag and drop them in the area below.

Linearity Move import Artboards

You can set the Duration of your animation here as well, but you can always adjust this while animating.

Linearity Move scene duration import

Tap Import in the top right corner. Your new Project will open and automatically be animated thanks to Auto Animate. You’ll see the Timeline at the bottom of the screen.

Linearity Move Auto Animate Timeline

Tap the Play icon to view your animation. If you’re 100% happy with your Auto Animated post, you can export your design immediately.

Skip to Step 7 below to learn how to export your animation.

Step 5

Bonus: add a text reveal animation

Want to add more flair to your announcement post? Let’s add an animation to reveal the text from the top to the bottom.

To do this, you can switch to Design Mode and select the Rectangle Shape Tool in the Project Toolbar on the left.

Linearity Move Design Mode

At the start of your Timeline, draw a shape that covers the entire text. Make sure it’s the same color as the background of your animation.

Linearity Move draw rectangle

Switch back to Animate Mode and tap the Keyframe icon on the left of the Playhead controls. Select Position.

Linearity Move Keyframe Position

Now, move the Playhead to the end of the scene and add another Position Keyframe. At this Keyframe, use the Selection Tool to move the shape all the way down with all the text revealed.

Linearity Move animating shape

Tap Play to see your text reveal animation (wasn’t that easy?).

Step 6

Bonus: add pulsing stars

Having too much fun? Us too. For this bonus step, we’ll open one of our other templates and use the star designs for our announcement post. Here’s the template we’re stealing the stars from:

Use the Selection Tool to select one of the star shapes and open the Assets tab in the Inspector on the right. Tap the Plus icon to add the star to your Assets Library.

Linearity Move create Assets

Now, you can open your announcement post Project again. The pulsing stars will be added right at the end of the main animation, so let’s go ahead and lengthen the Scene Duration to 5 seconds in the Animation Tab.

Linearity Move Scene Duration

Open the Assets Tab and tap on one of your stars to add them to your Scene.

Linearity Move add Assets

Add a Position Keyframe for the star after the end of your main animation, and then use the Selection Tool to make the star smaller. You can also Rotate the star.

Linearity Move Position Keyframe

Move the Playhead forward and add another Keyframe. Now, enlarge your star and rotate it in the opposite direction.

Again, move the Playhead forward and add your last Keyframe for the star. Make your star smaller again and rotate it in the opposite direction.

This will create a spinning-out effect.

Linearity Move animate stars

We want the stars to appear as they spin out so it looks like a sparkle.

Move the Playhead to the beginning of the animation and add an Opacity Keyframe for the star. Make the Opacity at the start 0% in the Animation Tab.

Linearity Move create keyframe

Now, move the Playhead to the first Position Keyframe you made for the star. Set the Opacity to 100%.

Linearity Move Opacity Keyframes

Play the entire animation and take note of where exactly you’d like the Opacity change to happen, then drag the first Opacity Keyframe there.

For our animation, we started the Opacity transition just before the spin-out animation starts. We also made the Opacity transition slightly longer to extend into the spin-out effect.

Linearity Move spin-out effect

If you’re happy with the star animation, long-press on the star’s layer in the Layer Panel on the left of the Timeline to open more options. Tap on Duplicate at the top of the dropdown that appears to create a copy of your animated star.

Do this a few times to create a couple of stars.

The last step is to stagger the stars’ animations so each star appears after the other. To do this, simply drag each star’s Animation Stack on the Scene Timeline.

Step 7

Export your animated announcement post

To export your lively announcement post, tap on the File Name menu item in the Top Toolbar and choose Export.

Linearity Move Export

A modal will appear. Check your video export settings and tap the Export button once you’re done.

Linearity Move Export modal

Ready to become an animating pro?

Stepping into animation may have initially felt overwhelming, but it's a journey filled with opportunities for creativity and expression. Every professional animator once started as a beginner.

Create moving ads, social media posts, and announcements quickly and easily with Linearity Move.

As you continue to experiment, learn, and refine your skills, you'll develop your unique style and voice. Keep pushing the boundaries of your creativity, stay patient with your progress, and most importantly, enjoy the process.

Feeling inspired and ready to explore what else you can do with Linearity Move? The platform offers advanced tools and resources tailored for designers eager to explore animation's endless possibilities. 

Together, we can bring your most ambitious animations to life. Explore Linearity Move now and see where your creativity can take you.

Bring motion in-house

Animate marketing assets in seconds with Linearity Move.

Get started
Linearity Linearity

Frequently asked questions

How long does it take to learn animation?

The time it takes to learn animation can vary widely depending on your pace of learning, the amount of time you dedicate to practising, and the complexity of the animations you wish to create. Generally, getting comfortable with the basics can take a few months, but mastering the art can take years of practice.

Using an animation design platform like Linearity Move, you can learn the basics of animation in a matter of minutes. Its Auto Animate feature is a revolutionary development that makes animation accessible to graphic designers and marketers who want to animate assets.

Can I animate if I can't draw?

Yes, you can still animate even if you're not skilled in drawing. Many forms of animation, like stop motion or vector animation, don't require traditional strong drawing skills. Software tools like Linearity Move also provide presets and templates that can help you create animations without drawing from scratch.

Is animation a good career?

Yes, animation is a viable and rewarding career path with opportunities in film, television, video games, advertising, and web design. Success in the field requires creativity, dedication to learning, and the ability to adapt to new technologies and trends.

How long does it take to create an animation?

The time it takes to create an animation can vary widely depending on its complexity, the detail of the artwork, and the animation's length. Simple animations can be completed in a few hours, while more detailed or longer projects can take weeks or even months.

With Linearity Curve and Linearity Move, you can create an animated post in a few minutes.

What are some good resources for learning animation?

Numerous resources are available for learning animation, including online courses (Udemy, Coursera, Skillshare, etc.), video tutorials, and books like The Animator's Survival Kit (2001) by Richard Williams. Joining animation communities or forums can also provide support and feedback as you learn.

How to animate an announcement post in 3 minutes | Linearity
How to animate an announcement post in 3 minutes | Linearity