Stretchy variable fonts in After Results (because of expressions)

For the uninitiated: variable fonts are principally particular fonts with animatable properties like width, weight and slant. They’ll open up some very efficient animation prospects, and with the wave of stretched textual content showing in Movement Design; variable fonts are very a lot on-trend.

First, slightly terminology

A brand new phrase you’ll come throughout whereas working with variable fonts is Axis (or Axes). These are the variable properties hooked up to the font you’re utilizing. Relying on the font you utilize, there may be often 2-6 Axis constructed into it.

What we’re working in the direction of

Right here’s the impact we’re going to create:

1. Get some variable fonts

We’ll want to put in some variable fonts. These can be found from a number of completely different distributors and a few could also be included in your Adobe subscription. Envato has a incredible array of variable fonts, so I’m going to decide on a few these:

For this instance, I’m going to start out with the font Griggs from Envato, then later I’ll be utilizing Manufaktur, however you should use any variable fonts out there to you.

Set up as you’ll normal fonts. The file might be a .ttf, .otf or .otvf format.

2. After Results setup

After Results doesn’t presently help variable fonts straight out of the field, however Adobe has launched a particular script which we simply want to put in. Head over to the Adobe Github and obtain the script by clicking the “…” button and deciding on Obtain:

After getting the .jsx file; open up After Results. Beneath the File menu; click on Scripts > Set up script file… and navigate to the file in your laptop. Click on Choose and it’s best to get the next affirmation:

We then must restart After Results for the set up to take impact.

3. Getting conversant in variable fonts

Reopen After Results and begin a brand new venture (File > New Undertaking). Create a brand new composition (Composition > New composition). I’m going to make mine 15 secs lengthy and a sq. ratio of 1080x1080px. The remainder of the settings gained’t matter for this venture.

Create a brand new sort layer by clicking the T icon within the prime menu or T in your keyboard and click on wherever within the comp viewer panel to start out typing.  Kind “ABC” and, within the Properties panel, scale up the font dimension to fill a couple of sixth of the comp. The font used at this level doesn’t matter in any respect.

Subsequent, within the File Menu Click on on Scripts > InspectVariableFonts_ApplyControls_ScriptUISample.jsx. This could open a panel named Apply Variable Fonts With Controls. 

Drop down the Put in Variable Fonts menu and it’s best to see any variable fonts you have got put in. Select the font you want to use (I’m selecting Griggs).

Choose your textual content layer and, again on this window, click on Apply Variable Font. It is best to see it change to the font. Then click on Apply Controls for Axes. It is best to now see results utilized to the layer, giving management of the parameters included for that font.

Have a mess around with the sliders and also you’ll see which you could now keyframe parameters like Width, Weight and Slant, relying on the font. Cool Proper!?

4. Separate letters

Now that you just’ve experimented with the controls, you may discover that one thing is lacking. We’re not in a position to management seperate letters inside a textual content layer, the way in which we will with the per-character 3D textual content animators on common AE textual content layers. 

In the event you’re something like me, you’ll need that functionality, and the subsequent steps gives you that management.

With our Variable Font Textual content Layer chosen, we’re going to duplicate it twice so we have now three layers. Edit the textual content on every layer to have one letter solely. transfer the letters alongside the x-space so the they’re again in line within the right order once more (doesn’t have to be good spacing).

5. Scripting time!

At this level we have now three letters in a row, all with their very own animatable sort qualities. However once we animate the variable sort sliders on a letter, the letters themselves will keep in a single place, and the areas between them will  develop and shrink unnaturally. Letters might even overlap, and we do not need that.

We have to create a script that appears on the letters, and positions them with right spacing, animating because the letters themselves change.

Twirl down the place property on the second and third layers (not Layer 1).  Holding ALT (PC) or Possibility (MAC); click on on the stopwatch icon subsequent to the phrase Place. It will create an expression for the place of that layer.  We’ll copy and paste the next textual content into the expression:

1

hole = 20; // Mounted spacing

2

3

prevLayer = thisComp.layer(index - 1);

4

5

prevRect = prevLayer.sourceRectAtTime(time, false); // No offset time

6

7

prevAnchor = prevLayer.anchorPoint; // Alter for anchor level

8

9

// Calculate proper fringe of earlier letter

10

11

prevRightEdge = prevLayer.remodel.place[0] + (prevRect.width / 2) - prevAnchor[0];

12

13

// Get present letter width

14

15

curRect = sourceRectAtTime(time, false);

16

17

curAnchor = anchorPoint;

18

19

// Set new X place primarily based on proper edge + fastened hole

20

21

newX = prevRightEdge + hole + (curRect.width / 2) - curAnchor[0];

22

23

// Preserve Y place

24

25

[newX, transform.position[1]];

Every layer ought to reposition itself with a extra pure spacing.

In the event you now regulate axis sliders on the A and/or B layer, the next letter(s) ought to shift to accommodate the change.

What is that this code doing?

As you’ll be able to see, we have now included some feedback contained in the code that will help you perceive what every line is doing:

• Firstly we outline a area dimension. On this case it’s 20px
• Second, we’re adjusting for anchor level adjustments. This implies: if we modify a letter, i.e. from ‘W’ to ‘I’, and its dimension subsequently adjustments; the anchor level will routinely regulate to find itself within the center-bottom of the letter.
• The Third command is assessing the layer’s personal present width.
• Fourth; we’re defining the suitable place primarily based on the above elements.
• The final half simply retains the Y place constant. 

6. Add area/kerning management

That is wanting nice! You’re going to discover as we construct on the impact although, that the default hole between letters won’t be precisely what you need. To treatment this, we’re going to add a management on every letter to regulate its kerning and/or add an area between phrases. Once more, we’re not including this to the primary letter, however might want to repeat the next for one another letter within the line (in my case B & C).

With the second layer chosen (B, in my case), click on on the Impact menu from the highest of the display screen and discover Expression Controls > Slider Management. A brand new impact might be added to the layer referred to as “Slider Management”. Proper-click on the identify of the impact and choose rename.  We’ll rename this slider management impact to: “Main Hole Width”. 

Set this new slider’s worth to twenty.

With the layer nonetheless chosen, hit P in your keyboard to disclose the place property if it isn’t presently seen, and click on the > icon subsequent to the phrase Place to twirl down and reveal the expression textual content.

Click on on the expression textual content to enter enhancing mode and spotlight the quantity “20” within the first line of the code.

Then, with the quantity 20 highlighted, click on and drag the pickwhip to hyperlink it to the worth of the “Main Hole Width” slider (pictured)

Your code ought to now look one thing like this:

In the event you now regulate the “Main Hole Width” slider, you’ll discover that it offers us the management we want over kerning, and if we set it to round 50 or 60, it feels extra like an area between phrases. Repeat this step for the “C” layer.

7. Create an animated loop

It’s time to check our creation, and put it in movement!

Choose your first layer and press E in your keyboard to disclose all results. With the Timecode set to 00:00:00, set a number of of the variable font properties’ values to 0. Set a keyframe for the worth(s) by clicking the stopwatch icon for that worth.

Transfer the Timeline to about 00:01:00 (one second) and set the worth to the utmost for that property (i.e. Weight often goes as much as 100, so we’ll set weight to 100). Set a keyframe for the worth(s).

Transfer the Timeline to about 00:02:00 (two seconds) and set the worth again to 0. Set a keyframe for the worth(s).

Copy these two keyframes by clicking + dragging within the timeline to pick out them and utilizing CTRL/CMD + C. Transfer the timeline marker to 00:03:00 (three seconds) and paste them CTRL/CMD + V.

End this animated loop by shifting to 00:06:00 on the timeline, and setting a keyframe with worth of 0. You now have 5 keyframes on Layer 1.

Click on + drag to pick out all keyframes and paste them into the matching impact’s slider in your remaining 2 layers.

Choose all keyframes and hit F9 in your keyboard to make all of the keyframes ease out and in.

Offset the layers’ animations slightly by dragging the keyframes left and proper within the timeline and see what kind of impact this creates.

8. Change anchor level for layer 1

In the event you want the left aspect of your first letter to remain static, relatively than scaling up and down from its heart, do that further non-obligatory step:

Choose Layer 1 (A) and hit Y in your keyboard to enter Pan Behind instrument (Anchor Level).

Whereas holding CMD(Mac) or CTRL(PC), click on and drag the anchor level of Layer 1 to its backside left nook. It ought to snap into place.

9. Make some extra textual content!

Excellent news! The onerous bit is completed! You now have a fully-functional template to create any piece of textual content you want, with individually animated per-character variable textual content.

Let’s increase our canvas a bit by urgent shift+Okay and in Composition Settings change the width to 1920.

Strive duplicating the final letter in your line and shifting it to the underside of the layer stack. If every thing is appropriately arrange, the letter ought to routinely be added to the tip of the phrase. You can even swap to the kind instrument (CTRL/CMD + T) and alter the letter to something you need it to be. You are able to do this as many occasions as you need, to spell the textual content you want.

To reposition the road of sort; choose all of the layers and click on + drag it up, down, left and/or proper. Maintain Shift whereas dragging for exact horizontal or vertical management.

To create a new line of sort, merely duplicate all layers of your first line, transfer all of them to the underside of the layer stack (however hold them in the identical order), and, within the comp viewer; Shift+Click on & drag them vertically to place them under the primary line.

I like to vary the layer coloration for the brand new line only for ease of use. You are able to do this by clicking the coloured sq. on the layers and deciding on a brand new coloration from the pop-up menu.

10. Create a slogan

I wish to create a slogan to actually take a look at out our creation.

Let’s say I wish to create the phrase: “THIS WAS ALL MADE IN AFTER EFFECTS”.

I can match “THIS WAS ALL MADE IN” within the two strains we have now created, offering I duplicate the final two letters as we did in step 6.

So as to add one other line, we’ll wish to shrink the kind down a bit. If we choose all layers and scale back the font dimension, it ought to preserve all of the spacing proportionally.

Duplicate the second line (layers 9-17, in my case) as we did in step 6, and keep in mind to vary the layer coloration.

Edit the brand new line of textual content to learn “AFTER EFFECTS”. Keep in mind to make use of the “Main Hole Width” sliders we set as much as edit areas and kerning.

11. Add extra fonts

Now is an effective time to show utilizing a number of fonts!

Choose all of the letters in your final line of textual content, and once more, from the File menu, open Scripts > InspectVariableFonts_ApplyControls_ScriptUISample.jsx.

Within the Put in Variable Fonts dropdown, choose one other variable font. I’m going to pick out Manufaktur Variable Common, one other font I downloaded from Envato. Nothing will occur simply but.

With the letters of your final line of textual content nonetheless chosen, click on Apply Variable Font within the variable fonts window.

A pop up will seem asking if you wish to take away the present expression. click on Sure. And don’t panic. These might be restored shortly. It should ask you an identical factor for every layer chosen so hold clicking Sure. 

Preserve the Apply Variable Fonts With Controls window open.

Now with all of the letters nonetheless chosen; click on Apply Controls for Axes. If the brand new font shares the axes you animated on the opposite font, its animation ought to be restored.

I.e; I animated the Weight and Serif sliders when utilizing Griggs, and after I modified these layers to Manufactur, it retained the Weight animation, however not the Serif animation, as a result of Manufactur doesn’t have that Axis. It does retain these keyframes although, in case I alter once more to a font with a Serif axis.

12. Constant line width

That is wanting nice! However a possible customer suggestions may go one thing like:

“I don’t love how the general size of the strains retains shifting”

This final step will resolve that concern for you!!  It’s a bit guide, however its fairly fast and works nicely.

Begin by measuring every line. We will do that by urgent CMD+R (MAC) / CTRL (PC) to deliver up the rulers in your viewer. Click on and drag from the top-left nook to reposition the highest rulers start line (0) to be in step with the beginning of your textual content strains.

Now (along with your timeline set at a degree the place there’s a good unfold of daring and light-weight letters), have a look at the highest ruler and jot down a width measurement for every line (doesn’t have to be precise). Dragging guides out from the ruler areas will help with this.

 My measurements are:

• Line 1: 1010
• Line 2: 1310
• Line 3: 1380

Preserve these helpful.

Now create three Nulls, one for every of the layers (Layer > New > Null Object).  Coloration code the nulls to match your textual content strains, and place them on the left-hand fringe of the primary letter of every. Title them Scaler 01, 02, & 03. The vertical placement of those nulls doesn’t matter.

At this level we have to precompose our strains. Choose all of the purple layers (together with the Scaler) and Proper-click > Pre-Compose. Title the brand new Composition “This Was”.

Repeat precomping for the orange layers (“Made In”) and blue layers (”After Results”).

Now, within the “This Was” Precomp, create an expression for the null’s scale property. With the null chosen, hit S to point out the size property. Maintain down OPT (MAC) / ALT (PC), and click on on the stopwatch icon subsequent to the phrase Scale.Click on within the expression textual content to edit it. Exchange the present textual content with the next script:

1

desiredWidth = 800; // The precise width you need

2

3

// Get first and final letter layers

4

5

firstLetter = thisComp.layer(1);

6

7

lastLetter = thisComp.layer(thisComp.numLayers);

8

9

// Measure bounding field of all letters

10

11

firstRect = firstLetter.sourceRectAtTime(time, false);

12

13

lastRect = lastLetter.sourceRectAtTime(time, false);

14

15

firstX = firstLetter.toWorld([firstRect.left, 0])[0];

16

17

 lastX = lastLetter.toWorld([lastRect.left + lastRect.width, 0])[0];  

18

19

// Further area correction (assuming further spacing after a selected letter)

20

21

extraSpace = 46 - 20; // The extra area wanted past the same old hole

22

23

// Calculate precise width together with further spacing

24

25

currentWidth = lastX - firstX + extraSpace;

26

27

// Calculate exact scale issue

28

29

scaleFactor = desiredWidth / currentWidth;

30

31

// Apply scale correction

32

33

[scaleFactor * 100, 100];

As soon as pasted in, You’ll want to vary the “desired width” on line 2 from 800 to the size you measured for the present line of textual content, i.e. for me, my first line measured 1010px, so I’ll exchange 600 with 1010.

After enhancing the specified size within the expression, choose all of the letters for this line of textual content (line 1 letters are T,H,I,S,W,A & S) and dad or mum them to the scaler null.

You’ll nonetheless be capable to tweak this outcome after parenting the letters, by adjusting the desiredWidth worth contained in the scaler script, and/or adjusting the Main Hole Width sliders in your letters.

What is that this script doing?

This “scaler script” measures the full width of all animated letters, together with any further areas, and calculates how a lot they have to be scaled to at all times match inside a set width. It then applies this scaling solely to the X-axis to maintain the textual content wanting pure, guaranteeing the spacing stays constant with out (an excessive amount of) stretching or squishing. Repeat the Scaler script utility in your different two comps (All Made In, and After Results)

13. Remaining contact

All completed! The final ultimate contact is to return into the VariableFun_01 comp and regulate your layers to a centered alignment.  Change colours and add any results you please to make it pop!