How to Recreate Apple’s "iPad Mini" Animated Text

Animated text is great for websites - it’s fun, colorful, and it grabs your audience’s attention while emphasizing your messaging. Apple has done just that with their “iPad mini” text on their website, which uses Lottie animation.

Now, we’ll let you in on a little secret: it’s not that hard to do. To show you how simple it can be, we have recreated Apple’s “iPad mini” Lottie animation text, which you can watch in the video below.

Or you can follow these steps that we have listed. To follow along, download the exercise files here.

1. Use the Lottie Grabber Chrome extension to grab the Lottie

The first step uses Lottie Grabber. If you don’t have Lottie Grabber, you can download it from the Chrome Web Store. The Lottie Grabber gives information on the animation such as height, width and frame rate - this will be useful in making sure our recreation is exactly the same.

To grab the Lottie JSON file, follow these steps:

• Open the iPad mini webpage with Google Chrome.
• Click on the Lottie Grabber extension icon. It should be on the top right of your Google Chrome toolbar.
• Click Edit Lottie to grab the animation.

2. Load the animation in the Lottie Editor and upload it to your animation board

The first step will lead you to the Lottie Editor.

This is how your animation should appear on Lottie Editor - it should have grabbed the exact “iPad mini” animation on your editor.

Here, you’ll need to upload it into your Lottie private animation board. This gives us a blueprint for us to recreate with Adobe After Effects later.

• Click Upload to my Previews located on the right sidebar of the Lottie Editor.
• The animation will then be uploaded to your private dashboard on LottieFiles.

3. Use the LottieFiles for Figma plugin

Now, we move to Figma. The LottieFiles plugin allows you to drag and drop the Lottie. If you don’t have the plugin, you can download the LottieFiles for Figma plugin here.

• Right click and select Plugins and click on LottieFiles.

• Click My Animations and select the iPad mini animation (which was uploaded into your animation board in step two).
• Move to frame 120.
• Click Insert as SVG and Convert to GIF.

As it converts, you can use this time to delete any unnecessary (i.e. empty) frames that have been imported.

To delete the frames, just select it, drag it away from the text and delete. You should be left with the “mini” text. Next, you have to export the layers as PNG.

On the left-hand panel, rename the animation frame to “mini”.

Then, complete these steps:

• Click Add to Figma on the plugin. It will insert the GIF animation. You can close the plugin.
• Adjust the GIF to a width of 572 and height of 112. (Note: this follows the dimensions of the original iPad mini animation)
• Make a copy of the GIF.
• Double click on the GIF copy, click GIF and drag the toggle to right (the last frame).

In Figma, there are now three assets - two GIFs, and the animated text (mini). One GIF acts as the blueprint for Adobe After Effects, where the second one accommodates the different texts and the “mini” asset.

Make sure to also name your GIFs. For the rest of this tutorial, we will refer to these three elements as we have named them in the video - you can follow these names so it is easier for you to follow along for the next steps:

• mini.png (the “mini” text)
• Sans Serif.png (the GIF copy)
• Script.png (the original GIF with the colored “mini” typeface)

Now, click Export 2 layers, making sure the file format is PNG. Do this for all three files.

4. Use the LottieFiles for Adobe After Effects plugin

You should now have three assets to recreate Apple’s Lottie animation. At this point, you can load Adobe After Effects and run the LottieFiles plugin. If you don’t have it installed, you can download the LottieFiles for Adobe After Effects plugin here.

Once you have it installed, run the plugin:

• Click Window on your Adobe After Effects toolbar.
• Click on Extensions and select LottieFiles.

Then create a new composition:

• Click New Composition. Check your width and height (remember, we are using 572 px and 112 px respectively). The frame rate should be 60 frames per second with a duration of 02:00.
• Don’t forget to add in your Composition Name.

5. Import and organize elements in Adobe After Effects

We have to add our assets into Adobe After Effects - this is where we start working on the animation.

Drag or upload the elements (mini.png, Sans Serif.png and Script.png), which we saved earlier in step four, into Adobe After Effects. Color code the files Sans Serif.png and Script.png for easier reference.

• Hide Sans Serif.png.
• Select mini.png to position its layer on top of the blueprint, aligning it with the word “mini”.

6. Recreate the ‘iPad mini’ text

Next, we have to recreate the text “iPad” and “mini”.  Currently, the files are static so you have to recreate the elements on Adobe After Effects.

• Select the text icon on the toolbar, and type out “iPad” using the font SF Pro (this is the font Apple is currently using). Use a size of 144 px.

• Place the typed-out “iPad” on top of the blueprint, aligning it with the word “iPad”. Make sure your anchor point is not in the corner. If it is, fix it by holding down Command + Option + Home together if you are using a Mac. This should place the anchor point in the middle of the “iPad” text.

• Hide Script.png and select the iPad layer. Copy and paste it on top of the words “mini”. Change the text “iPad” to “mini”.

7. Create a mask using the stroke and pen tools

From the previous steps, your new assets are labeled with the source name “mini” and “iPad”.

We will be using three assets to create the animation - the ones labeled as “mini”, “ipad”, and “mini.png”. You can color code these three assets to easily differentiate them. In our example, we have colored it red.

Okay, let’s start animating!

• Select “mini.png” and use the pen tool to draw the original style of the “mini”. Make sure to draw until the dot of the ‘i’.

• Click Effect on the toolbar, then head to Generate and look for Stroke.
• After selecting Stroke, change the size of the brush to almost 30 (we used 29.7) - this hides the black text.
• Change the Paint Style to Reveal Original Image. To check, you can hide mini.png and it will reveal your drawing.

8. Create the animation effect

This step is where we start the animation.

From here, we will wipe out the black “mini” text and recreate the animated “mini” on top of it. The current “mini” text is acting as a placeholder for the animation we will be creating.

Now, we start animating.

• On the LottieFiles plugin, you will see a toggle which you can change the frame. If you shift the toggle, you can see where the animation starts. We have determined that it starts at frame 9.
• Set the scrubber to frame 9 as well.

• Click on the stopwatch icon next to Start in the Effects Control panel to add a keyframe.
• Use the LottieFiles plugin to check when the animation ends by dragging the frame toggle to the right.
• Drag the frame roughly when it ends - which is frame 68. This means one second plus eight frames on the scrubber.
• Change the Start value on Effects Control to 100%.

Now, select mini.png and use the pen tool to draw the outline of the letters. This outline will determine the path of the motion. Try to be as accurate as possible.

• Go to Effects, then Generate and choose Stroke again. Increase the size of the brush to 18 on Effects Control. Also, change the Paint Style to Reveal Original Image.
• Click End in Effects Control.
• Change to frame 11 on the LottieFiles plugin and scrubber. This is where the animation will start.
• Click End in Effects Control and change to 0.0%.
• Change the frame in LottieFiles plugin again to 108 frames. This is where the animation will end.
• Change the frame on the scrubber too - 108 is one second and 48 frames.
• Change End in Effects Control to 100%. The animation should match.

Now you can unhide “mini”, then preview your animation via the scrubber.

9. Add the circles for the letter ‘i’

We’re almost there! Time to dot our ‘i’s to finish this animation off.

• Hide all the assets except script.png.
• Zoom into the word “mini” so we can view the circles of the ‘i’. We zoomed it up to 400%.
• Select the Polygon Tool to create two circles and fill it in. The size we are using is 82% on scale.
• Move the first circle on top of the dot of the first ‘i’. If you are having trouble moving this, it might be because of your anchor point. You can use the same trick again by pressing Command + Option + Home.
• You can scale it down to match the size of the circle. We have scaled it to 82%.

Once you have your circle in place, let’s work on animating it.

• Using the LottieFiles plugin, drag the toggle to when the dot starts its animation on top of the ‘i’. We have found it begins at 93 frames, which is one second and 33 frames on the scrubber.
• Scale your Shape Layer to 0.0%.
• Use the LottieFiles plugin again to check when the animation ends. We found it ends at 108 frames, which is 48 frames on the scrubber.
• Scale it back to 82%.
• Work on the second circle in the following ‘i’. Just select the initial Shape Layer, copy and paste it. At this point, you can rename your circles for easier reference. We have named ours dot 1 and dot 2.

• Select dot 2 and position it on top of the second dot.
• Using the LottieFiles plugin, change the frame of this circle to 101, which is one second and 41 frames on the scrubber. This is where its animation begins.
• The animation ends at 114 frames, which is one second and 54 on the scrubber.

• Change the color of the circles to make it similar to the original text.
• At this point, you can preview your entire animation. Just zoom out, and hit play on the scrubber.

10. Render the animation into a Lottie and upload it

You did it! Your text should be in motion. Now, it's time to render your animation.

• Search for your composition on your LottieFiles plugin, click on the composition, and click the arrow to render.

• Click on UPLOAD to upload it to your LottieFiles private animation board.

11. Import the animation into Figma

Congrats! You have now successfully created Apple’s Lottie animation that you can use in Figma.

• Open the LottieFiles plugin in Figma.
• Click on My Animations and your new “iPad mini” text animation should be within your library. Just click on it and select Convert to GIF.

Once it converts to GIF, there might be an issue with the background color, causing the word “iPad” to be invisible. To fix this, click Back in the LottieFiles for Figma plugin and make sure your Background color is set to white instead of “none”.

Then click Add to Figma. You can close the LottieFiles plugin.

12. Match the background color

We have taken a screenshot of Apple’s web page to match our animation for the purpose of this tutorial. Here, we will show you how to match the background color to ensure we have recreated the animation accurately.

Place the animation to sit on the web page, as it was when you saw it on Apple’s website.

• Adjust the animation width and height to fit the design. You can change the opacity to help place it and align with the design - reduce your opacity to match it on the text. You can change the opacity back to 100% after positioning it.

• Now, you can hide the GIF. To hide the original design, create a rectangle of the same color of the web page background and lock it. Now you can put your GIF on top.
• However, the background of our new GIF is white, which does not match the background of the web page. To fix this, click Layer on the right hand side of Figma and choose Darken - this trick also works with the script version.
• Press play on the top right corner to preview the animation.

13. Add a fade out animation in Figma

Adding a fade out animation can make it more engaging. It’s pretty simple.

• Duplicate the frame - in our tutorial, the main frame is labeled Desktop 3, and the duplicate is Desktop 4.
• Select Desktop 3, click on Prototype and link both frames.

• Change the After Delay to 800ms. Make sure Smart animate is chosen, and that the Navigate to is set to Desktop 4.
• Change Darken to 0%.

• Select Desktop 4 and click Prototype and drag the pointer to Desktop 3.
• Choose After Delay at 800ms (you can change the timing accordingly, but we have chosen 800ms for ours).
• Click the play button to preview. It should have an additional fading animation, compared to our initial animation work.

If it is too fast, you can change your timing to a larger figure to slow it down. We changed our After Delay to 1,500ms with 50ms on Ease Out - this gave a much slowed down effect, compared to our initial 800ms.

Alright, that’s it - you’re all done! We hoped you picked up a few tips and tricks on how you can create beautiful animated text for your own projects. With that, have fun and we hope you try this out.