Smarter ways to work with Text in Cavalry.
Text is an important component in communicating message or story but it can be a tricky beast to tame, particularly when it comes to animation. Managing layout, fonts, weight and spacing plus handling various versions, messaging and languages can become a very challenging and time consuming process.
Cavalry has got your back with some clever ways to work with Text — opening up new possibilities and saving you time. Below is a non-exhaustive list of some of the highlights.
You’ll see the word string a lot in this article. We use this term to describe the characters that are contained within a Text Shape.
Style Behaviours
Cavalry includes several utilities we call Style Behaviours. These can be used to procedurally select characters/words/lines within a Text Shape and manipulate them. That could be changing typefaces, resizing the font, changing the colour or adjusting the spacing.
The animation below is a homage to part of Buck’s branding identity for Palm. It uses an Apply Typeface Style Behaviour to select keywords within a sentence and then set the typeface for each of those words. The result is that typefaces can be mixed and matched based on search criteria. It’s possible to search for individual characters or whole words or even harness the power of Regular Expressions (regex) for more complex search. Beware — regex is not for the faint hearted but this example uses the simple expression \b(NFT|Culture|Creativity)\b. If used within a system for automation, that expression could then be driven by external data from, say, a Google Sheet.
You can apply the same idea to colour via the Apply Text Fill Style Behaviour. In the example below, rather than using a Regular Expression we can ask Cavalry to act on ‘Specific Indices’. You can enter comma separated values (e.g. 0, 2, 5 would pick the 1st, 3rd and 6th characters) but here we’re asking Cavalry to apply a green colour to the last line of a string.
The result is that by simply changing the string in the Text Shape, the last line will always be green. No need to set each quote up individually, just set your rules and leave Cavalry to do the boring work for you.
If you work with type a lot, you’ll know that, while occasionally therapeutic, adjusting kerning by hand can be a laborious task. So, having painstakingly adjusted an entire paragraph, it can be a little ‘testing’ when your client comes back with a complete rewrite of that perfectly set strap line. 😠
Cavalry can help here. By using the Apply Character Spacing Style Behaviour it’s possible to set out custom kerning pairs (or triples/ quadruples...) and apply those to entire documents. The result is that, when the copy changes, you’re still smiling knowing that the typeface is set just how it should be.
In the example above, the kerning for any instance of va within the string is being dynamically set by the Apply Character Spacing Style Behaviour. You can also add multiple ‘matches’ to apply kerning to multiple combinations of characters.
Unsurprising, the Apply Font Size Style Behaviour can be used to affect the font size for Text Shape’s using the same procedural methods. If you need to repeatedly highlight certain words this can be a real time saver.
Variable Fonts
You may have noticed the Apply Typeface example above uses a variable font. In this case a font called Whyte from Dinamo. Cavalry offers native support for variable fonts exposing a font’s ‘axis’ depending on the design of the font which can then be adjusted or animated. Because this is procedural, rather than having to go through and manage the properties of each word individually, all instances of the same font can be controlled from one source meaning less duplication of work and therefore less room for error.
If you select a variable font for a Text Shape, a hamburger menu will appear to the right of the Font attribute. Clicking this will pop up a window containing the font’s axes which you can then manipulate. An axis is a parameter built into the font by the designer so they are unique to each font.
If you’re interested in experimenting, Variable Fonts is a great resource for finding…variable fonts.
Studio Dumbar’s Lead Designer Christopher Noort used Cavalry to showcase his font Tekno Variable. See his original instagram post here.
String Manipulators & Generators
There are various ways to edit or create strings in non-destructive way in Cavalry. We call these utilities String Manipulators and Generators.
Manipulators
A Manipulator can be used to do things like resize, shuffle, transition or join strings. The beauty of working with Manipulators is that you can replace the entire string and maintain any animation you have applied.
If you’re creating automated templates you can add other utilities like the String Length which can then be used to calculate how many characters/ words/ lines are in a string and update the speed of the animation accordingly The result is that, no matter how long your string is — the animation will maintain a consistent speed.
Generators
String Generators can be used to…generate strings. These can be values, hash, dates, timecodes and more.
If you’re someone that designs FUIs then generating random (but considered!) text can be a big part of artwork intended to represent complex systems. Cavalry makes this trivial with random numbers, hexadecimal or hash outputs.
If you’re into data visualisation then formatting values can be an onerous task unless, of course, you have a Value Generator with options to set the padding and precision, format the thousands separator or add a prefix/ suffix of your choice. Wrangling and formatting input data becomes a breeze.
An interesting use case for a String Generator called the Formatted String is in the creation of dynamic filenames. It combines strings together meaning you can construct more complex strings. For example, combine the resolution of your comp, the string of a Text Shape and today’s date.
In the example above, the contents of the Formatted String attribute ({0}_{1}_{2}) is used to reference the contents of the attributes listed below (0:String, 1:String, 2:String).
The <resolution> and <d><DD><m> are Render Tokens and 1:String is connected to another Text Shape. The resulting output will be 1920x1080_Cavalry_Wed-08-Jun when connected to the File Name in the Render Manager.
This means, each time you change any of those attributes (or the date changes), the file name of a render will update automatically. This can be particularly useful when used in combination with Dynamic Rendering.
Sub-Mesh
In order to animate text on a per character, word or line basis you’ll need a Behaviour we call a Sub-Mesh.
Meshes in Cavalry can contain a hierarchy of other Shapes within them. In the case of a Text Shape that hierarchy consists of Lines, Words and Characters and the Sub-Mesh Behaviour provides a way to access and affect them.
In the example below, an Oscillator is used to move the letters up and down and then a Stagger is used to offset the animation of each letter.
This tutorial on our YouTube channel shows you how to set this up in just a minute.
Of course, like most things in Cavalry, everything is procedural meaning you can go back and change the height and speed of the animation, the time offset or the string itself. Everything just works.
Backgrounds
Text Backgrounds are notoriously tricky to handle, particularly in animation but with Cavalry — things are different.
A Text Shape comes with a built in Background that you can add with the click of a button. It includes features to increase the padding and set bespoke adjustments for ascenders and descenders — crucial for working with all the different fonts out there.
It has options to set the background shapes per Document (the entire string), Paragraph, Line, Word or Character. You can also set ‘specific indices’ meaning you can easily pick out key parts of your string.
Because a Background is a shape just like any other shape in Cavalry, they can also be used alongside the Constraints. In the example below, the cursor animation has been constrained to the right edge of the button using a Bounding Box Constraint. As the text within the button increases, so does the background and the cursor’s animation remains pinned to the same relative position along the button. This means you can make edits to the button and be confident that the cursor will never obscure the text. Great if you’re experimenting with various ‘call to actions’ as part of a bigger project.
Here’s a great example from motion designer Mark Clarke using different inputs to populate the same composition with different messages and prices.
To resize/reposition elements at different aspect ratios, I used Composition Constraint and Number Ranges.
See Mark’s original post here.
Duplication
Cavalry’s Duplicator can be used to repeat text or pass the contents of String Arrays or spreadsheet data.
This can be great for creating kinetic type animations like the one below from Kyle Daily. Here, he’s using a variable font called Whirly Birdie, animating the Width axis and then offsetting the timing for each duplicate.
The Duplicator can also be used to layout tables of information. Here, Kyle Daily (again!) pulls in external data from Establish the Run to populate his design.
Scale to Fit
When text forms part of an automated template, it’s important that the design is capable of handling a variety of inputs. A wide range of marketing messages in several languages means that the content can become very unpredictable and hard to manage. At high volume, it’s not realistic to expect every output to be manually quality checked so it’s important to have confidence in the template and know that it works under any circumstance. A new feature coming in Cavalry 1.4 is a Scale to Fit Text Box attribute on the Text Shape. This means that as text changes, you can be confident that it will stay within a defined area and so not break out of the design. This is available to Professional users to test in Cavalry 1.4b2 now.
And this is just the beginning for text. We’ve got lots more we’d love to tackle in this space. Come and join our Discord server and let us know what you’d love to see.
All of the features above (except Scale to Fit) are currently available to use in the free Starter version of Cavalry but you can extend your creative possibilities further with Forge Dynamics, Google Sheets, Dynamic Rendering and JavaScript. See our post on what’s included with a Professional subscription.
