Auto-animate compares the differences between these two elements and animates the transition from one state to another accordingly.
Francesco de Lange
Digital Product Designer
Futuristic text animation in Adobe XD
Animating text with auto-animate
Introduction
At the start of 2020 I played Astral Chain, an action game for Nintendo Switch developed by PlatinumGames. The game combines laid back detective sequences with fast-paced combat sections, which make for an enjoyable and thrilling experience.
In the months leading up to the game's release, PlatinumGames published a variety of blog posts about its development, including two articles about the game's user experience and interface design. Even if you're not interested in videogames, I highly recommend reading them as they contain interesting UX and UI design insights nonetheless:
ASTRAL CHAIN Devblog: The Wide World of UI, Part I | PlatinumGames Official Blog
ASTRAL CHAIN Devblog: The Wide World of UI, Part II | PlatinumGames Official Blog
One of the aspects that caught my attention was the amount of effort put into the game's UI and its animations, which needed to be futuristic while also looking like they're part of the game world itself. I got so interested that I decided to recreate the game's intro logo animation, albeit in a much simpler fashion.
Too long, don't want to read?
I've got you covered. You can view the end result right away.
A quick intro about auto-animate
Auto-animate is one of my favorite Adobe XD features. I use it all the time when making the microinteractions for my prototypes, which you can read more about in my other case studies.
How it works is that it compares the elements between two given screens and animates them accordingly when an interaction takes place. Here's a useful video by Howard Pinsky explaining it with some examples.
Auto-animate: on/off toggle
So let's say we want to make an on/off toggle. First we design the toggle in its 'off' state, then we duplicate the artboard and change the toggle's position and colors to our liking to simulate an 'on' state.
Wiring it up
Next we wire up the two artboards using a tap on the toggle as a trigger. I did this for both artboards, so I can switch back and forth freely. As with other animation types, you can set the easing and the duration to your liking.
The toggle in action
Starting a preview directly in Adobe XD allows us to interact with the toggle and see the animation in action. Auto-animate compares the two artboards and moves elements accordingly, creating all the necessary in-between frames we need for a smooth interaction.
Sounds easy, right? That's because it is!
Recreating the animation in Adobe XD
Inspiration
So let's get back to our initial goal, partly recreating Astral Chain's intro logo animation. In the blog post, UI artist Yasutaka Saito mentions using "a blocky noise effect [...] chromatic aberration, some flashier noise and a shaking effect" for her animations.
Take a look on the right to see how it looks like.
Left: how we want the full logo to look like.
Right: our initial frame.
Initial setup: final frame, first frame
Back to Adobe XD, let's set up an artboard with how we want the final text to look like. In my case, I've opted for 'Another Universe'. We then duplicate the artboard and substitute all letters with random ones. This will be our starting frame.
Note: I've chosen a monospace font so everything aligns perfectly. In this case it also helps create a futuristic feeling.
Creating our frames
The next thing we need to do is to create all the in-between frames from frame one to our final frame.
"But you just said auto-animate takes care of that for us!"
That's right, and it's something which we'll make use of in the final stages of the animation. For now, since we want the text to constantly shift in a Matrix-esque fashion, we'll have to do it ourselves. So what we're doing is creating multiple frames, changing up the text for each one.
Blocky noise effect
Next up, we create the noise effect we'll apply to our text. These are essentially rectangles drawn with the rectangle tool in different sizes. I've done this in black and white for simplicity, since we can always apply other colors later.
Next we group every cluster of rectangles together with ctrl+G (cmd+G if you're on Mac), so we can move them and animate them together later on.
Applying the noise
Now we can simply copy & paste the noise onto our frames to simulate a glitching effect in the text. Notice how I shifted the last letter of the first word in order to enhance the effect.
This will appear for just one frame throughout the animation and really gives us the feeling we're going for.
Setting up the last few frames
After having created an amount of frames we're happy with, we can apply the finishing touches to our animation. What I've done here is duplicated the text, lowered its opacity and moved it a few nudges left and right for the upper and lower text respectively. I then added some noise.
For the next frame I moved the duplicated text some more to the left and the right and did the same with the noise. The text's opacity has been set to 0 and the noise has been squeezed with the shift key so it looks like its dissolving.
The next frame is going to be the final one we made at the very beginning, with our text clearly displayed.
Putting everything together
In total I have 34 frames. Depending on how long you want the animation to be, you can end up with more or less.
What's important here is that all frame animation has to be set with a trigger of 'time' at 0 seconds, animation type set to 'auto-animate', easing set to 'none' and a duration to your liking.
The last few frames (bottom 9) which I've separated from the rest, have different settings because they contain moving elements. I've animated them with different easing and duration settings for each frame to get the ending right. I recommend playing around with the values until you're satisfied with the result.
Final result
Everything comes together in the animation you can see on the right. Of course, it doesn't perfectly match Astral Chain's animation as that one has some extra subtleties going on and more time put into it, but it gives off the same general vibe.
Conclusion
If this were a more serious project or a commission, I would have made the animation in an appropriate app like After Effects, but since this was not the case, I decided to work in Adobe XD. Being more of an interface design oriented app, it's obviously not made for this kind of work but I find its simplicity oftentimes liberating. I like working with constraints because it encourages me to approach things differently and in this case I also wanted to see how far I could push the app's auto-animate feature.
As it turns out, auto-animate is a very capable tool in the right hands and I can't wait for Adobe to add a timeline-like feature to make it even better.
Has this case study sparked your interest in working together? Then don't hesitate to drop me a line via my contact form.