MoGRT Expressions Reference

Anchor Points | Linking Text | Auto-resize Backgrounds for Text | Auto-resize Text | Line Spacing Slider | Expression Controls

Note: Using excessive/complex expressions throughout a MoGRT will cause poor playback performance. Balance expressions use between necessary and useful expressions for the best user experience.

Anchor Point Expressions

School of Motion has a detailed guide on Anchor Point expressions for text and layers.

Text Expressions

Linking Text Styles

After Effects 2020 has introduced expressions to control source text and text styling. It also enables the ability to keep font, size and styling in sync across multiple text layers in After Effects and Motion Graphics templates.

Auto-Resize backgrounds based on length of text input

This is useful for lower thirds.

Lock the Anchor Point of a Text layer to its center. Create a Text layer and apply this expression to the Anchor Point:

var s = sourceRectAtTime(); var l = s.left; var t = s.top; var h=s.height; var w = s.width; [l + w/2, t + h/2]

Apply this expression to the Size property on a Rectangular Shape Layer:

var s = thisComp.layer("Text 1"); var padding = 100; x = s.sourceRectAtTime().width + padding; y = s.sourceRectAtTime().height + padding; [x,y]

Pickwhip the Position property on the Shape Layer to the Position Property on your Text layer. It should look like this:

thisComp.layer("Text 1").transform.position

Optional padding sliders will give users more control over the size of the background so they aren’t constrained by the width and height of the text layer.

Auto-Resize text size based on text length

Auto-scale the text layer when text is longer than the background. Create a new Solid layer that’s smaller than the Comp size, for example, 900x200 pixels, name it “Background." Change the 60 value for a padding that looks right to you or pickwhip to a Slider Control for finer control.

Apply this expression to the Scale Property of the Text layer:

var w = thisComp.layer("Background").width-60; var resize = (w/Math.round(thisLayer.sourceRectAtTime().width))*100; if (Math.round(thisLayer.sourceRectAtTime().width) > w){ [resize,resize] } else { [100,100]; }

This number creates padding so the edge of the text layer isn’t right on the edge of the background layer. Adjust to fit the aesthetic, and potentially create a slider control for users to be able to change this as needed.

This same technique can be used with Shape Layers instead of Solids. Create a new Rectangular Shape Layer and change the Size to 900x200 pixels. Apply the above expression to the Scale property of the Text layer. Change the variable to reference the Shape Layer's Size.

var w = thisComp.layer("Shape Layer 1").content("Rectangle 1").content("Rectangle Path 1").size[0]-60;

Line Spacing Slider

1. Add a Slider Control to your text layer.
2. Rename the Slider Control to Line Spacing.
3. Add a Line Spacing Text Animator to your text layer.
4. Apply the following expression:

var y = thisLayer.effect("Line Spacing")("Slider"); [0 , y];

Expression Controls

Drop Down Menus

1. Create a Null and name it Controls
2. Add a Dropdown Menu Control
3. Select Edit Properties of the Menu
4. Add more menu options by clicking +
5. Rename each menu item
6. Choose a method below

Dropdown Menu Method To Turn Layers On or Off

Apply the following expression to an Opacity Property of the layer you wish to toggle:

if (thisComp.layer("Controls").effect("Dropdown Menu Control")("Menu").value==1) 100; else 0;

Change the .value==1 number to the value of the index on the Dropdown Menu Control.

Dropdown Menu Method To Flip a Layer:

1. Create a Null and name it Controls
2. Add a Dropdown Menu Control
3. Select Edit Properties of the Menu
4. Apply the following expression to a Scale Property of the layer you wish to flip:

var x = thisComp.layer("Controls").effect("Dropdown Menu Control")("Menu").value; switch (x) { case 1 : [100,100]; break; case 2: [-100,100]; break; case 3: [100,-100]; break; case 4: [-100,-100]; break; default:[100,100]; }

This method is useful for flipping transitions and backgrounds.

Checkbox Control

Checkbox Control Method to Show or Hide a Layer:

1. Create a Null called Controls
2. Add a Checkbox Control effect
3. Apply the following expression to the Opacity Property of the layer you wish to toggle:

value * thisComp.layer("Controls").effect("Checkbox Control")("Checkbox")

When a user checks the box in the Essential Graphics Panel, the layer’s opacity will be at whatever value the layer is set to. If it’s not checked, the opacity will be 0. This method can be used together with keyframing opacity.

Slider Control

Slider Control Method: To add a Slider Control to show or hide a layer, create a Null called Controls and add a Slider Control effect to it.

Apply this expression to an Opacity property on the layer you wish to give control to:

if(Math.round(thisComp.layer("Controls").effect("Slider Control")("Slider")==1)) 100; else 0;

When a user moves the Slider Control to 1, the Opacity will be 100.

More Expression Reference

Guidelines: 1: Technical Requirements | 2: Metadata Requirements | 3: Submission Requirements Reference: Home | Categories | Expressions | Media Replacement | MoGRT Optimization | Artist FAQ

Header Image: 80's Video Game Space Title by Wavebreak Media

Last Updated: 2/14/23

Back to top