A short intro to the MOGRT universe
A MOGRT is a Motion Graphics template that can be used in Adobe Premiere Pro or Adobe Premiere Rush. The files are self-contained and have a .mogrt extension. You can make MOGRTs in either Premiere Pro or After Effects.
This article is about making MOGRTs in After Effects. Apart from the dramatically better tools we have for creating Motion Graphics and animation in After Effects, you should build your MOGRTs in After Effects for another reason. Control. Premiere Pro editors can alter MOGRTs made in Premiere Pro in every way. MOGRTs made in After Effects are as flexible or as rigid as you need them to be.
This template limits the bar colors to three specific colors.
RELATED: If you’re a Premiere Pro user, Frame.io’s Premiere Pro integration will blow you away.
Flexibility may be desirable when you build MOGRTs for Adobe Stock and other websites that sell stock templates. But when you make custom designed MOGRTs for your customers, flexibility is exactly what they don’t want. They want the user to only be able to choose between a limited number of colors and fonts, so that they get a coherent look across all their videos on all platforms.
(Unfortunately, MOGRTs made in After Effects are not supported by Premiere Rush. Since Premiere Rush is only in version 1.0 at the time of this writing, it’s not too crazy to hope that Rush will support MOGRTs from After Effects in the future.)
What a MOGRT can and can’t do
MOGRTs can do a lot, but they can’t do everything. Here’s a list that will help you understand the concept. It’s all seen from the user’s view, in Premiere Pro.
- MOGRTs can contain text, shape layers, solids, still images, video clips and audio.
- MOGRTs cannot be linked to external media files by the user. Only media files that are included in the MOGRT can be used. This is among the most wanted features, though, so it may be possible in future updates.
- MOGRTs can be linked to external data files (CSV or TSV) that can control text, data values and colors in the MOGRT.
- MOGRTs cannot interact with other layers in the Premiere Pro timeline. This means you can’t make a background layer inside a MOGRT automatically blend with the clip below it using the Overlay blending mode, while also having the text layer in the same MOGRT use the Screen blending mode. You can use blend modes as on any other clip, but the whole MOGRT will get the same blending mode.
- MOGRTs can allow the user to change the font family, font style, size, and faux styles of a text layer. But the rest of the settings in the Character and Paragraph panels are unreachable for MOGRTs.
Only a few parameters in the character and paragraph panels can be controlled in a MOGRT
Making the MOGRTs user-friendly
The hallmark of good MOGRT design is ease of use. If your MOGRTs are hard to use, or just cumbersome and slow, your customers will not be happy.
What follows is a collection of different ways to make your MOGRTs stand out as more user-friendly than the vast majority of stock MOGRTs out there.
[large_cta]
Limit the number of controls
When you’re designing MOGRTs it’s very tempting to add lots of different ways to make changes. But remember that each new feature adds another level of complexity. The users may be more satisfied if they get fewer controls.
One slider to rule them all
Sometimes you can also let one sider control several things. Say you have two sliders that control the colors of a text layer and a background layer. The user can choose between three colors using these sliders. It doesn’t make any sense to use white text on white background, or red text on a red background. So maybe they only need one slider that changes the color of both the text and the background layer.
When they choose the red background, the text goes white. When they choose the white background, the text goes black, and when they choose the black background, the text also goes white. This ensures that the readability is always good, and you need just one slider.
Use groups and comments as a guide for the users
In the autumn 2018 update (AE 16.0), groups were introduced into the Essential Graphics panel, and these help immensely when organizing sliders, checkboxes, and text fields in the MOGRTs. Use them!
Groups aren’t just a way to organize controls—they also work as a workflow guide for the user. If you put sliders and controls into groups in the order the user should adjust them, they will be more intuitive to use.
Use Sliders instead of point controls
MOGRTs do support Point Controls, so we could drag the Position parameter of a layer directly to the Essential Graphics panel, and it would work. But since the point controls are incredibly flexible, their value can be set very high. Position goes all the way up to 32,768 pixels (2^15). Scale can easily be set to more than a million.
It’s not very likely that anyone would ever want to move or scale anything that much. So, we use Sliders instead, with limited ranges.
Use only fonts from Adobe
A good way to make your customers unhappy is to give them a template that uses a font they don’t have, so they must dig around for it on the Internet and maybe even need to pay for it. If you have Creative Cloud, then you have Adobe Fonts—a collection of thousands of fonts that can sync to your system. Not all of them are free, though. Make sure you don’t tick the “Show fonts available for purchase” box when you browse Adobe Fonts.
Make your MOGRTs resolution-independent
The term “resolution-independent” has two meanings in this context.
- You can write expressions that make your layers scale according to the frame size of the MOGRT.
- You can build a MOGRT that fits all sizes; Widescreen, Square and Vertical video.
When you build a MOGRT, it’s a huge time-saver if you can reuse comps and layers from earlier MOGRT designs. This isn’t always straight-forward. If you copy a 4k comp from an existing project, and need the new MOGRT to be 1920×1080 px, then often all the layers will need to be resized and moved.
This is because we’ve set specific numbers for Position, Scale, and so on, like setting Position to 960, 540 to center a layer in an HD frame that’s 1920×1080 px.
Absolutely not
But if you want to scale and position your layers relative to the frame size, you should use expressions instead of entering absolute pixel values. That will automatically adjust your MOGRT to different comp sizes.
Here’s expression code for the shape layer Size property that makes it always be 70% of the frame width and 40% of the frame height.
x = thisComp.width*70/100; y = thisComp.height*40/100; [x, y]
And here’s code for the shape layer Position property that will always put it in the middle of the frame.
x = thisComp.width/2; y = thisComp.height/2; [x, y]
Yes, using expressions this way instead of entering numbers will take a little bit longer, the first time. But if you copy the comp now, and change the size of the copy, the shape layer will still cover the same percentage of the screen.
As you can see, clever use of expressions makes the comp, the shape layer, ext. layers, the animations, etc. recyclable and reusable.
Use Responsive Design – Time when it can replace expressions
In the October 2018 update of After Effects and Premiere Pro, we got Responsive Design – Time. This protects regions from time-stretching if the user adjusts the duration of the MOGRT in Premiere Pro.
When a user drags the out-point of such a MOGRT in the Premiere Pro timeline, the protected regions will have the same speed, while the rest of the animation will be time-stretched to fit the new length.
Typically, you will want to protect the in and out animations in a MOGRT.
This was a very welcome new feature, and makes the MOGRTs easier to use, and negates the need for lots of code to control the duration. Before we got this feature, we had to give the user a “Duration” slider that would move the out animation. But it would not adjust the out-point of the MOGRT clip in the timeline in Premiere Pro, which was a bit confusing for some users, and it also added an extra step. The new way is a lot easier for the user–and for the designer.
You can add protected regions from Composition menu > Responsive Design – Time.
Making your mark
You can also create a protected region by adding a marker and opening the Composition Marker dialog. Hit the asterisk key (*) on the numeric keyboard with no layers selected. Or click the Comp Marker button to the right of the timeline. Then press Alt/Option and drag its duration to the desired length and double-click the marker to open the Composition Marker dialog box.
You can easily adjust the marker’s duration by dragging its handles. If you want to give the user control over the speed of the middle animation, this is not possible with Responsive Design – Time. In these cases, you can use expressions to move keyframes.
Beware: Audio doesn’t work well with Responsive Design – Time, so don’t expect sounds you’ve synced to the animations to work in Premiere. If the user adjusts the duration of the MOGRT, the sounds will be out of sync with the animations.
Plan for error catching and feedback
Sometimes, we create features in MOGRTs that require values within a certain range. Using a slider control to adjust a value means that you can restrict it to a limited range. But what if you want to give users just a text field to type or paste values into–how can we make sure they don’t enter an “illegal” value?
It’s pretty common to use the parseFloat expression to convert numbers in the text to a floating-point number. It drives the End parameter of Trim Paths on a shape layer that’s just a straight line.
So, if the user types 80 in a text field, this code will return a value of 80. If they type 25.6, the value will be 25.6, and so on.
myText = thisComp.layer("Bar 1 Value").text.sourceText;
parseFloat(myText) 
This will work fine as long as users enter a valid number. But what if they accidentally write some text in that field instead? The expression will break, and the user will not know why.
Hidden breakage
The user fails to notice the value changing to 100 (or whatever it was before the expression was added). So they don’t know that something broke! Of course, they wouldn’t type “text” in the number field, that’s only used for clarity here. But they may accidentally type “x80”, which will also break the MOGRT.
It would be much better to detect the problem and let users know they need to enter a valid number. So nest a comp with a red solid and a warning text. And use the following code on the Opacity for that layer.
txt = parseFloat(thisComp.layer("Bar 1 Value").text.sourceText);
if (isNaN(txt)) 100; else 0; The isNaN() part is code for is Not a Number. This will throw a big warning if the user enters text that’s not a number.
There may be other problems that are more serious than the previous one. For example, expressions that create conditions where the code tries to divide by zero are disabled. This is what try and catch(err) can be used for. Here’s the syntax structure.
try {
Block of code to try
}
catch(err) {
Block of code to handle errors
} This method is beyond the scope of this article. But to see it in action, watch this quick tutorial on try/catch(err) from Ukramedia.com:
Some useful expressions for MOGRT designers
If you’re new to expressions, the huge number of them available can be overwhelming. But you don’t need to know all of them to make nice MOGRTs. Here’s a few that I’ve found very helpful when designing MOGRTs.
sourceRectAtTime()
This expression measures the width and height of text layers and shape layers. You can use it to make a shape layer adapt to the length of a text.
sourceRectAtTime().width sourceRectAtTime().height
This omits the stuff inside the parentheses that you’d get from the Expression Language menu. The code inside the parentheses tells After Effects what time to measure the size and if extents should be included.
sourceRectAtTime(t = time, includeExtents = false) // full code sourceRectAtTime(time, false) // (shorter code) sourceRectAtTime() // (even shorter code)
Say what? Extents?
Here’s an explanation:
- For a shape layer, including extents will include strokes, repeaters, and other extra stuff, plus some room for anti-aliasing.
- A standard text layer (point text) does not have any extents.
- For a paragraph text layer, including extents will measure the bounding box. Not just the bounds of the text’s visible pixels.
Please note that support for extents in paragraph text is in the 15.1.0 (CC 2018.1.0) version of After Effects or later. In older versions, only shape layers have extents. This created problems for people who had written sloppy code with includeExtents = true, because the old MOGRTs started behaving differently when they updated Premiere Pro.
Specific time
Deleting the text inside the parentheses will make After Effects use the current time, and extents will not be included. Sometimes, you’ll have to specify a certain time that you want to measure the text size. Say you’re scaling the text from 0 to 100 when it animates in, but you want the background box, a shape layer, to be the same size all the way and just fade in. In that case, you’d want to measure the text size after the in animation is over. If that’s at 1 second, you could use this code.
sourceRectAtTime(1)
To include extents, you’ll have to specify it in the parentheses.
sourceRectAtTime(time, true)
Here’s an example that’s often used on the Size parameter of a rectangle in a shape layer. It finds the width of a text layer named Name and adds 150 pixels to it. Then I use that for the width of the rectangle and set the height to 90 pixels.
x = thisComp.layer("Name").sourceRectAtTime().width + 150;
y = 90;
[x, y] 
When the name is longer, the Name BG layer adapts.
I could, of course, have linked the rectangle height to the height of the text layer too.
x = thisComp.layer("Name").sourceRectAtTime().width + 100;
y = thisComp.layer("Name").sourceRectAtTime().height + 50;
[x, y] You can also, combine this expression with Slider Controls, so the user can adjust the padding themselves. There’s a lot more we can do with this expression, like placing layers relative to the top, bottom, left or right borders of a shape or a text, and so on, but this short introduction should give you an impression of how it works.
Linear and Ease
These expressions are very useful when you need to transform values from one range to another. Say you want to give the user a Slider Control to control the vertical position of a logo, but the actual values that will work for the logo are between 144 and 852. That’s a strange range to give a Slider.
Using the linear expression, we can transform that range into something more useful. The syntax seems a bit strange when you see it for the first time.
vPos = effect("Vertical Logo Placement")("Slider");
linear(vPos, 0, 100, 144, 852) This expression says: “when the vPos value goes from 0 to 100, the output value should go from 144 to 852.”
You can also use it to control animation timing. This expression on the Y Position of a text layer will make it move in from the side between 0 and 0.5 seconds.
linear(time, 0, 0.5, -1000, 110)
Note that the Opacity is also animated via the linear expression, with the addition of a Duration slider. In the final version of the animation, I used ease instead of linear, to get a smoother animation, with ease into the end position. Here’s the expression on the X Position parameter.
ease(time, 0, 0.5, -1000, 110)
And here’s the code for the Opacity, which makes it fade out from 0.5 seconds before the value of the Duration slider and be completely gone at the time the Duration slider sets.
t = thisComp.layer("Controls").effect("Duration")("Slider");
linear( time, t-0.5, t, 100, 0 ) This control over time is still useful, even if we have protected regions and Responsive Design – Time. Say you want a logo to rotate around its own axis exactly 3 seconds after it comes in, but you want all the other animation to be controlled by the protected regions. Using and ease expression for this will make that parameter’s animation independent from the rest of the MOGRT.
Rounding
Say you want to use a Slider Control to let the user choose between four different logos. You can do this with an expression that sets Opacity to 0 or 100 on the four logo layers according to the value of the slider.
You could use a collection of larger-than and lower-than operators, but it’s easier to just use the equals operator.
mySlider = thisComp.layer("Controls").effect("LogoChoice")("Slider");
if (mySlider == 1) value else 0 The code would be the same for all four logo layers, except that mySlider == 1 would change to
mySlider == 2, mySlider == 3, and mySlider == 4.
The problem with this code is that it will only work if the user manages to drag the slider to exactly 1, 2, 3, and 4. Since the sliders are not very accurate, that’s not very likely. So, we need to round the values. For this, we’ll use the Math.round expression.
mySlider = Math.round (thisComp.layer("Controls").effect("LogoChoice")("Slider"));
if (mySlider == 1) value else 0 This rounds the value to the nearest whole number, and the code will work beautifully, no matter where the user drags the slider. As you can see, after typing Math.round, we put the value that needs to be rounded inside parentheses. You can also use the Math.floor and Math.ceil expressions. These will round down and up to the nearest whole number.
Controlling the number of decimals
Math.round is great when we need whole numbers, but sometimes we want a certain number of decimals. One way to do this is to use toFixed combined with Number.
mySlider = thisComp.layer("Controls").effect("Bar 1")("Slider");
Number(mySlider).toFixed(2); The toFixed(2) code will limit the number of output decimals to a maximum of two. The word Number at the start of the last line tells After Effects to convert the string from the toFixed expression to a number.
There’s a problem with this, though. The toFixed expression does not always round correctly! For example, values that end with .005 will be rounded down instead of up.
mySlider = 2.005; Number(mySlider).toFixed(2); // outputs 2.00, should be 2.01
Getting exponential
One widely used solution is to use exponentials to multiply the floating-point number by some power of 10 in order to leverage Math.round. I used this approach in a MOGRT with an animated bar chart. Except that I used parseFloat (I could have used Number). In this MOGRT, the one slider drives the bar heights and the numbers over the bars. Another slider drives the number of decimals. Here’s the code I used to control the number of decimals. This particular one is for Bar 1.
dm = Math.round(thisComp.layer("Controls").effect("Decimals")("Slider"));
num = thisComp.layer("Controls").effect("Value 1")("Slider");
a = Math.round(parseFloat((num * Math.pow(10, dm)).toFixed(dm))) / Math.pow(10, dm);
parseFloat(a).toFixed(dm) 
if/else
This is the most useful expression, in my opinion. I use it for so many different things in MOGRT design. It’s great for deciding what should happen when a Checkbox Control is ticked, when a slider is dragged, when the background color is set to blue, or when a text element has more than a certain number of characters, and so on. It’s incredibly flexible.
The if/else statement can be written in several different ways. In my opinion, the easiest one goes like this:
if (condition) value if true; else value if false
So, to control the Opacity of a layer based on the value of a slider, we could use the following code:
mySlider = thisComp.layer("Controls").effect("Color")("Slider");
if (mySlider == 3) 100; else 0 The layer would be visible only when the slider is set to 3. Here’s a way to hide or show a layer based on how a checkbox is set. The code is again used on the Opacity parameter.
myCheckbox = thisComp.layer("Controls").effect("BG on/off")("Checkbox");
if ( myCheckbox == 1 ) value; else 0 The word value means it will use whatever value the Opacity has, but only if the checkbox is on. If it’s off, the layer Opacity is set to 0.
Not limited
The if/else expression is of course not limited to the Opacity parameter. You can use it on any parameter, for example on Position to move a logo layer depending on a slider named Logo Placement.
Please note that the October 2018 update of After Effects introduced a new, faster expression engine, where the syntax is a bit more rigid than in the old engine. If/else statements you’ve written in the old engine may not work in the new engine.
In the new engine, you must add the curly brackets or add a semicolon or a line break before the word else.
if (colorChoice == 3) {100} else {0}
if (colorChoice == 3) 100
else 0
if (colorChoice == 3) 100; else 0 If you’re a JavaScript expert, and know the ternary operator, this will also work.
There are more ways to compare than the double equals sign, of course. Here are the operators you can use.
Combining multiple if/else expressions
Often, there are multiple conditions that should affect one parameter. In such cases, you can use else/if statements. It’s an extension of the if/else statement and the extra lines of code start with else/if instead of just else.
You start with a standard if statement, and you end with a normal else statement. All the other statements start with else if. Here’s some code from a MOGRT where I’ve used logical operators and multiple else if statements on the Position parameter to place a layer according to the value of two sliders.
Pos = Math.round(effect("Position")("Slider"));
AR = Math.round(effect("Aspect Ratio")("Slider"));
if ((AR == 1) && (Pos == 1)) { [100,100] }
else if ((AR == 1) && (Pos == 2)) { [1820,100] }
else if ((AR == 1) && (Pos == 3)) { [100,980] }
else if ((AR == 1) && (Pos == 4)) { [1820,980] }
else { [960,540] } Making MOGRTs for stock libraries
The basic idea when building MOGRTs for sale on Adobe Stock, Motion Array, Motion Elements, Envato, and other sites that sell MOGRTs is to make the MOGRTs really flexible. You don’t know what color, font or size the user wants, so you give them lots of control.
Provide Font controls
In the October 2018 update of After Effects (version 16), we got the ability to use Font Controls in MOGRTs. As explained earlier, not all the Character and Paragraph parameters are available. But at least you can let the user choose Font, Font Size and Faux Styles. After you’ve added a Source Text to the Essential Graphics panel, click the Edit Properties button to enable these choices.
Unlimited color controls
You also don’t know what colors the user would want to use, so give them lots of freedom. On a text layer, click Animate > Fill Color > RGB to add Fill Color inside an Animator. Add this Fill Color to the Essential Graphics panel, and the user can choose any color for the text. You can do the same with Fill Color on Shape Layers and any other color parameter.
Allow for multiple lines of text
Some users would probably want more than one line. To add the option of typing more than one line, just hit Enter a few times in the Source Text field in the Essential Graphics panel. Each line, even the empty ones, will create a text field in Premiere Pro, as shown in the previous figure.
The sourceRectAtTime() expression will still work as expected if you have background layers that must adapt to the text size.
Universalize the expressions
Effects in After Effects have different names in different languages. So, if the user has a German version of Premiere Pro, a Slider will be named “Schieberegler”. If you’ve built the MOGRT in an English version, the expressions will break!
But every effect also has a universal name. To link to that name, press Alt/Option when you use the Expression Pickwhip to get the link. When I first linked to a slider in my Controls layer without pressing Alt/Option, and then again while pressing it, I got these two code snippets.
thisComp.layer("Controls").effect("ColorChoice")("Slider")
thisComp.layer("Controls").effect("ColorChoice")(1) See how the Slider has been renamed to 1? It’s parameter number 1. The other names, “Controls” and “ColorChoice”, are names I have given the layer and the effect, so they will be named the same in every language version of After Effects–so they don’t need to be changed.
It’s so easy to forget to do this that I don’t recommend that you do it. Instead, use the Expression Universalizer script from AEScripts.com. This script will automatically universalize all your expressions, and you can do it as a last step before you export the MOGRT. Remember to do this on a copy of your project–the expressions do get harder to read.
Making custom MOGRTs for customers
When you’re building MOGRTs for customers, like organizations and companies, you do not want to give them unlimited freedom. On the contrary, all of the companies I’ve made MOGRTs for have wanted me to restrict the choices, to make sure their videos get a consistent graphic design and keeps everything within the limits of their design manual.
Get their design manual
Yes, you need their design guide, design manual, brand guidelines, or whatever they call it. It will have info about what fonts are OK to use, what colors are allowed, graphic elements that can be used, logo placement and size, and so on.
For a sample of brand guidelines, see the one from Berkeley. It’s got 123 pages of detailed info.
Give them limited color choices
You can restrict color choices with Slider Controls, rounding, and if/else statements. The following code used on the Fill Color of a text layer or a shape layer will make sure they can’t choose an “illegal” color. Instead, they’ll drag a slider, and the colors will change accordingly, between three legal colors.
myColor = thisComp.layer("Controls").effect("Color Choice")("Slider");
if ( myColor < 1.5 ) hexToRgb("003262");
else if ( myColor > 2.5 ) hexToRgb("FDB515");
else hexToRgb("FF1F60") Yes, these are three hex colors copied from Berkeley’s brand guidelines. Hex codes for colors are great because they can be copied from color swatches, typed into spreadsheets and pasted or typed into color pickers as one single code, unlike RGB colors that need three numbers. After Effects uses RGB colors, and the hexToRgb expression makes it easy to convert the hex codes to RGB values.
Give them limited font choices
You can use a similar method if the company has two or more approved fonts. But you need one layer per font. If you have three fonts to choose from, make three text layers, each using a different font. Link the Source Text of text layer 2 and 3 to the Source Text of text layer 1. Then drag only the Source Text for text layer 1 to the Essential Graphics panel.
Use this code on the Opacity for each layer, substituting fontChoice == 1 with fontChoice == 2 and fontChoice == 3 for two of the layers.
colorChoice = Math.round (thisComp.layer("Controls").effect("fontChoice")
("Slider"));
if (fontChoice == 1) value else 0 If the company font is available from both Adobe Fonts and other sources, use the one from Adobe Fonts. This ensures that everyone can automatically sync the font if they don’t have it installed.
Other limitations may be necessary
You will encounter a lot of different circumstances that triggers a need for limitations you never thought would be necessary. For example, the Norwegian Red Cross adds their logo into the web video player on their website. So, editors don’t see the logo when they’re editing, but it’s there when viewers see it. We made it impossible to place the lower third that high when it’s on the right side. This stops lower third graphics from being placed where they get covered by the logo.
When the lower third in this MOGRT for the Norwegian Red Cross is on the right side, it can’t be placed so high that it covers the logo. On the left side, it goes higher.
Sharing your MOGRTs with the customers
If you can be invited to their MOGRT library (a folder that can be shared between multiple editors via Creative Cloud), that will make it super easy to share the MOGRTs you’ve built for them. Just choose that library in the Export Motion Graphics Template dialog box. The MOGRT will immediately be available to everyone in the workgroup. If you need to make changes, just delete the old version and export the new one. It’s impossible for the users to accidentally grab an old version.
They can give you write permissions for a limited time, just so you can export all the MOGRTs. When everything is working OK, they can stop your access.
Export to Local
If you can’t get access to their Libraries, you’ll have to export to a Local Drive. Then send the files to them. Instruct them to import the MOGRTs into Premiere Pro by importing them one by one (Graphics > Install Motion Graphics Template) or by keeping them in a folder and adding that folder to their Essential Graphics panel.
To add a folder, ask them to click on the panel menu in the Essential Graphics panel in Premiere Pro. Then choose Manage Additional Folders, and then click the Add button and navigate to the folder containing the MOGRT files.
The problem with sending the files is the person who doesn’t replace the files after receiving the new version. So there will always be a few users that need help with the process.
If you can convince them to share a library with you temporarily, that’s by far the easiest method.
[Power-up your Premiere Pro post-production with Frame.io’s tight integation]
Learn more
I hope this article has triggered your interest for making MOGRTs for customers and for stock libraries. If you want to learn more about this topic, download the free eBook about Making MOGRTs that I wrote for Adobe. It’s 122 pages of info.
