Yoan Boisjoli
102
AE Expressions Coins
11
After Effects Coins
136
COW Coins
2
Solve Coins
Forum Replies Created
-
Hi Doma! This is the kind of thing that would be easy to do using the script Pins & Boxes (link here: https://aescripts.com/pins-and-boxes/ )
If you don’t want to buy a script, then a solution that could work would be to add this expression in the source text:
inputText = "Your full text here";
speed = 10; // Characters per second
visibleChars = Math.floor(time * speed);
inputText.substr(0, visibleChars);And add a Null Object to follow the top-right corner of the text dynamically using SourceRectAtTime. Then, you can parent the colored box to the null. For example:
textRect = thisComp.layer("Text Layer").sourceRectAtTime();
textPos = thisComp.layer("Text Layer").transform.position;
[textPos[0] + textRect.width, textPos[1] - textRect.height];This way, the null adjusts automatically as the text grows, and the colored box follows it smoothly. It keeps things simple and flexible.
I took the liberty of creating it to test it out and here’s the aep file for you.
Hope this helps!
-
Hey Adam! Basically what it does now is that you can feed the expression the length of the text (how many characters are in the text) so that the expression know how many characters should have the specific style (font in this case) that you want.
My favorite way of doing this is to have 2 text layers (i.e. day and time) that drives a main layer where everything is assembled. So the main layer looks for the length of each layers so that way, no matter how many characters you have in the day, it will be in the right font.
I will usually feed the Day and Time source text to the essential graphic’s panel. That way it’s easier for the editor to replace the day and time individually. You could also go one step further and have both be controlled by a drop down menu.
Here’s an exemple:
// Get text from the driving layers
// Get text from the driving layers
var dayText = thisComp.layer("Day").text.sourceText.value;
var timeText = thisComp.layer("Time").text.sourceText.value;
// Combine the text
var fullText = dayText + " " + timeText;
// Define styles
var baseStyle = text.sourceText.style.setFont("ArialMT"); // You need to specify a default style first so you can change it later
var dayStyle = baseStyle.setFont("B612Mono-Regular", 0, dayText.length); // Day font
var timeStyle = dayStyle.setFont("Boldstrom", dayText.length + 1, timeText.length); // Time font
// Apply combined styled text
timeStyle.setText(fullText);
-
Hey Taylor! Don’t know if this is gonna help, but I did this in the past and worked well for me. I’ sending over an Ae file where I made different key poses for a mouth and I linked it to a dropdown menu where you can choose which pose you want and keyframe it. I’m simply having the path value changing depending on that menu with this expression here:
var s = effect("Dropdown Menu Control")(1).value;
key(s).value
-
if you ever consider upgrading, here’s an expression that works for having 2 different fonts. I also added an option for controlling the font size of the cursor:
var X = text.sourceText;
var F = Math.round(time * effect("Blink Speed")("Slider") % 1);
var L = X.length;
var T = time * effect("Speed")("Slider") - effect("Start At")("Slider") * effect("Speed")("Slider");
// Define the main text and cursor with distinct styles
var baseStyle = X.style.setFont("Helvetica-Bold"); // Main font
var cursorFont = "CourierBOLD"; // Cursor font
var Cursor = " ";
if (F == 1 || T > 0) Cursor = "|";
if (T >= L) Cursor = " ";
// Combine the text with the cursor
var displayText = T > 0 ? X.substr(0, T) + Cursor : Cursor;
// Apply styling
var styledText = baseStyle.setText(displayText);
// Apply the cursor font style only to the cursor portion
if (Cursor.trim() != "") {
styledText = styledText.setFont(cursorFont, displayText.length - Cursor.length, Cursor.length).setFontSize(100, displayText.length - Cursor.length, Cursor.length);
}
// Return the final styled text
styledText;
-
Hi Lukasz! So you would like to have a different font for the cursor without upgrading to the new After Effects 2025 which supports the per character expression styling?
-
Yes, as you can see, the word “effect” is not changed. By holding “Alt” while dragging, or simply using the effect’s index, you make it universal. When I do this, the Expression Universalizer script doesn’t change it. I guess it recognizes that it’s already compatible.
So in the Spanish version, it looks like this:
// Native languagethisComp.layer("myLayer").effect("myCtrl 2")(1); -
Hey Luke, another thing you could check is make sure the frame rate of the composition matches the frame rate of the footage. Sometimes mismatch can lead to details like that.
-
Alright I got something like that to work. I’m animating the slider with hold keyframes but feel free to try something else. I’m joining a screencast of how it’s behaving and my ae file also.
// Time Offset from Slider
var offset = effect("Slider Control")("Slider")/10; //dividing it by 10 becasue it's sensitive
// Total duration of the loop (from first to last keyframe)
var firstKeyTime = key(1).time;
var lastKeyTime = key(numKeys).time;
var loopDuration = lastKeyTime - firstKeyTime;
// Current Time adjusted by the offset
var adjustedTime = time - offset;
// Calculate the looped time
var loopedTime = (adjustedTime - firstKeyTime) % loopDuration + firstKeyTime;
// Ensure loopedTime doesn't go below the first keyframe time
loopedTime = (loopedTime < firstKeyTime) ? firstKeyTime : loopedTime;
// value at the looped time
valueAtTime(loopedTime); -
Hi Griffin! Is the property only one value or an array of 2 or more?
-
What I do is hold ‘Alt’ while pickwhipping a property, which makes it universal by addressing the index. However, at the end of a project, when I need to make it available in any language, I use the script Expression Universalizer.
