All our workflow explainers are waffle-free and work-tested. That’s the pixels.cool guarantee!
Animate text using keyframes and easy ease
Overview
Name of explainer: Animate text using keyframes and easy ease
Creative theme: Beginning Adobe After Effects
Software used : Adobe After Effects
User level: BEGINNER
This is explainer 3 of 5 in this series
This series includes:
- Tour the Adobe After Effects interface and create a new composition
- Animate text using built-in animation presets
- Animate text using keyframes and easy ease
- Add an expression to make the video flicker and animate a light flare
- Export the animated composition as an mp4 video
This series is also available as a FREE, short online course!*
If you’d prefer to work through this series in a short online course format, where you can track your progress and receive a PDF certificate of completion, it will be available from December 2024* on our sister site pixelsofcourse.
The Software
This series of explainers uses Adobe After Effects, an application designed for creating motion graphics:
After Effects is a PAID applications. A FREE trial is available, after which ongoing use will require an ongoing subscription. For the latest information and pricing, see Adobe’s current pricing information. If you’ve never used After Effects before, create a free account, download the trial and let’s get started!
What are motion graphics?
TV idents (like these classic idents from Channel 4 in the UK) are an example of motion graphics:
Animated movie and TV titles (like this example from the recent BBC series ‘Sherwood’) are motion graphics. This animated ‘Sherwood’ title text is similar to what we’ll create for a dystopian AI movie title sequence in this series.
Entire animations, like this amazing animated photo-movie are motion graphics…
…and we use After Effects to create the animations for the start of every video explainer:
How to generate video clips using LTX Studio
We used the online AI storyboarding tool LTX Studio to generate the short video clips for our trailer, including generating a soundtrack and voiceover. If you don’t have clips of your own this is a great way to create resources to fit your creative vision! Here are the main steps we followed in LTX Studio:
1: The LTX Studio dashboard shows options to start ‘with an idea’ or start ‘with a script’.
2: Enter the general ‘idea’ for the movie. We used an AI generated ‘voiceover’ from chatgpt as our idea prompt:
3: LTX Studio generates a storyboard with individual scenes and a thumbnail image for each. You can regenerate a scene by changing the prompt and shot-type at any time:
4: Select the shot editor tab at the top of the window to regenerate an individual video clip. Four candidates are generated to select between:
5: Add an appropriate soundtrack and a voiceover for the perfect cinematic experience!
6: Export the sequence of scenes as a single video file. The sequence is below (The audio was retimed in post to better match the duration of the sequence).
More motion graphics inspiration!
If you’re interested in the ‘story’ of motion graphics, here’s Adobe’s own introduction:
https://www.adobe.com/uk/creativecloud/animation/discover/motion-graphics.html
‘Best motion graphics in adverts 2024’:
https://www.yansmedia.com/blog/best-motion-graphics-ads-examples
More brilliant examples of motion graphics!
The animated trailer sequence at the end of this series
This is the movie trailer at the end of this explainer series. This is the FULL trailer which includes additional video clips (and a soundtrack) generated in LTX Studio (see section above). In this series we use After Effects to create the animated text sequence at the end of the trailer.
Screenshots taken from the start, middle and end of the title sequence. The movie title ‘Models’ zooms in over the video clip. As it comes to rest, the subtitle ‘Sentient Shadow’ flickers in below the main text:
The pre-requisities
This is a BEGINNER Adobe After Effects explainer series. After Effects is complex animation software and is not recommended for new computer users.
Why would I do this?
Keyframes are central to managing animation in most digital software. Using keyframes, you can precisely manipulate every available property including position, scale, rotation, and transparency, over time. After more than one keyframe has been placed, After Effects interpolates the values between two consecutive keyframes, creating smooth transitions. The ‘slow zoom’ text effect created here is very popular in TV and movies, as you can see in the title sequence for the ‘Sherwood’ BBC drama series:
Let’s do it!
Click the play icon to watch this explainer video. Subtitles are available – Click the settings cog at the bottom right for options. You can watch this video full-screen by clicking the full-screen icon at the bottom right.
Video Transcript
Here is the full transcript for explainer three:
00:15
Welcome to you.
00:16
In this explainer, I’ll manually animate my movie title text models so it zooms into the scene.
00:22
This video is part of a series and can be viewed on its own.
00:26
Apply built in effect is fun, but learning to animate manually using key frames is a skill you can transfer across to most professional animation software.
00:35
Click on the small right facing arrow on the text layer.
00:39
Next, click to expand the transformation properties.
00:43
Speaker 0
The text layer has a group of properties including the text position, location, and rotation.
00:50
Each property is temporal, which just means it can be varied over time.
00:54
I’ll start by placing the playhead at the start of the timeline and drag a left and right over the scale property.
01:02
Notice that at the moment, the text isn’t zooming straight in and out of the screen at the viewer.
01:08
This is because the anchor point for the text is here at the bottom center of the text.
01:13
To resolve this, go to layer, transform, center anchor point in layer content.
01:20
The anchor point is now perfectly centered and the text zooms in and out straight at the viewer.
01:26
Make sure the playhead is at the start of the timeline.
01:29
To tell After Effects I want to adjust the scale of my text over time, I’ll click the stopwatch here on the left of the scale property.
01:37
A blue marker has been added to the text scale value at the current point on the timeline.
01:42
This is a key frame, a specific point in time to which I want to assign a precise value.
01:48
At the start of the timeline, I want my text to be zoomed all the way out to the point just before it disappears completely.
01:55
So I’ll scale the text all the way up to about here.
01:58
The text is going to be on screen for the entire 10 seconds.
02:02
So I want it to come to rest at around the 6 second mark after which it’s going to remain in place for the final seconds.
02:08
Accordingly, I’m going to need a keyframe at the 6 second mark.
02:13
Again, adjust the scale to be roughly the final size of the text on the screen.
02:18
Notice as soon as I adjust the scale, a brand new keyframe is generated at the current time as the value has changed from the previous keyframe.
02:26
I’ll play the animation back in the usual way.
02:29
If it’s all gone a bit wrong, you can use After Effects undo option or select a key frame and press the delete key.
02:36
A top tip.
02:37
When you’re moving the playhead around selecting key frames, hold down your shift key and the playhead will snap to the nearest keyframe when you’re close enough to it.
02:46
You can also jump from one keyframe to the next by using the go to previous keyframe and go to next keyframe buttons here on the very left of the panel.
02:58
At the moment, the text animation starts then stops abruptly.
03:05
This looks clunky and not like the smooth movements you see in professional productions.
03:10
To add gradual acceleration or deceleration in after effects, we can use an option called easy ease.
03:16
I’ll right click on the keyframe at the 6 second mark, keyframe assistant, easy ease in.
03:24
As you can see, the animation now decelerates or eases to a gradual stop.
03:29
For more control over the easing, click on the graph icon at the top left of the timeline.
03:35
Here you can see the actual curves used by the easy ease animation and tweak them precisely.
03:41
For links to help with this feature, see the website.
03:44
I’ll continue to adjust my zoom animation until I’m happy.
03:48
I’ll then go on to add a second text layer for my movie tagline, sentient shadow, and animate this subtitle in towards the end of the existing zoom.
04:01
Before you continue to the next explainer, practice animating using keyframes.
04:06
In the next explainer, I’m going to add an expression to the video to make it flicker ominously, then animate a light flare to burn out my movie title to a bright white.
Good to know
As seen in the explainer, here are useful tips for working with keyframes:
To jump from one keyframe to the next, use the ‘go to next keyframe’ and ‘go to previous keyframe’ arrow buttons on the far left of the current layer property:
To ‘snap’ to a nearby keyframe when scrubbing across the timeline, hold down the SHIFT key on your keyboard as you scrub:
Everything you could ever need to know about keyframes
Where to next?
In the next explainer, we’ll use a simple expression to make the video clip flicker, then animate a flare across the video.
Remember, this is part of a series of explainers – Join us again for the other explainers in the series 🙂
Notes and updates
There are no notes or advisories at this time. This video explainer was last updated in October 2024. This page was last updated in October 2024.
We at pixels.cool are not responsible for the content of any external webpages or software downloaded from third party sites. Any links are included in good faith at the time of writing. All explainer content is compiled in good faith using processes and methods used by the team. Modern software provides users with many ways to accomplish a task, and for reasons of clarity we choose not to refer to multiple options. All computer users must run up to date virus / security software at all times to minimise risks of data loss.
New to pixels.cool?
Have a look at our year planner RIGHT HERE!