You can make a difference in the Apple Support Community!

When you sign up with your Apple Account, you can provide valuable feedback to other community members by upvoting helpful replies and User Tips.

How do I add gradient to the text in Motion app?

I want to add gradient to the text like Apple's keynote.like this.



However, in Motion, the gradient is not applied to the text as a whole, but to each letter.



How do I make it apply to the whole like apple?




[Re-Titled by Moderator]

Posted on Dec 12, 2024 4:16 AM

Reply
2 replies

Dec 12, 2024 2:28 PM in response to yuzername

I can't really offer an "easier" way than that suggested by Luis, but I can show you how to automate some aspects of the project and make it something that can be turned into a template for use in Final Cut.


The first thing is to create some text. Any text will do as we want this project to adapt to whatever you use. For this project, I just used the text you showed above ("Powerful...").


Next, Add Object > Generators > Generators > Gradient. Keep it on top of the text. In the inspector, change the Start Y and End Y values to 0.


To Start > X, right click and Add Parameter Behavior > Link. For the Link > Source, drag the Gradient in and drop it. Set the Source Parameter to Object Attributes > Size > Width and the Scale to -0.5.


Do the Same with End > X and set the Scale to 0.5.


The color gradient should now go edge to edge on the Gradient object.


Add a Numbers object (Add Object > Generators > Text Generators > Numbers. Uncheck Animate. Right click on the Value and Add Parameter Behavior > Link. For the Source Object, drag and drop the Text Object in the source well. Set the Source Parameter to Object Attributes > Size > Width. (more on this later)


Go back to the Generator tab of the Gradient and right click on the Width parameter and Add Parameter Behavior > Link. For the Source Object, drag and drop the Numbers object and set the Source Parameter to Object > Numbers > Value. You will need to set the Scale to 0.1 (more on this later).


The gradient's width should snap to the width of the text object.


Select the Gradient object and go to the Properties inspector > Blending and check the Preserve Opacity checkbox. Your text should appear and with the gradient applied.


Go to Behaviors > Basic Motion and add an Align To behavior. Drag and Drop the text object into the Object source well.


You now should have a text object you can drag around the screen and the gradient will always be constantly aligned — but you'll need a background.


Select the Group that the text and gradient objects are in. In the Properties inspector, change the Blend Mode from Pass Through to Normal. This is important to keep the "preserve opacity" effect only inside that group.


Add a New Group and move it underneath the text group.


Draw a Rectangle, any size. Add Behaviors > Basic Motion > Align To and drop the text object into the source well.


In the Shape inspector, right click on Size and Add Parameter Behavior > Link. In the Source Object source well, drop the text object. For the Source Parameter select Object Attributes > Size > All. Adjust the "paddings" with X Offset and Y Offset parameters at the bottom of the behavior inspector.


If you make this project a Title template, consider publishing just the individual gradient colors and the background Rectangle Size Link's X Offset and Y Offset parameters (as Padding X, Padding Y). [You might also consider publishing the rectangle's Fill Color and maybe the Shape > Geometry > Roundness.]


*more on this later —

Why a Numbers generator?

There are many parameters in Motion what will not accept values from other types of objects, as in this case — the text object. If you apply the text object in the Link for the Gradient's width, you don't even get the *option* to use any of the Object Attributes values (like Size, Edges, etc.) The Numbers generator can be used for almost *every* numerical value in Motion and will accept the Text > Object Attributes > Width value.

Why does the scale need to be 0.1?

The numbers generator is a little weird. It does not always represent what you think it does, and for some parameters linked to it, they are scaled larger (in my guess: to maintain a higher level of decimal accuracy). In this case, Numbers accepts the Object Attributes Width of the text and keeps it at 100 times the size, which necessitates scaling it back. Another example would be Rotations. Numbers shows a 90º rotation as 25, which is actually the "percent of a circle" 90º represents...


Numbers takes a "little bit o' gettin' used to" but it a powerful tool inside Motion.


Have fun! If I forget something or you run into trouble - just let me know.



Dec 12, 2024 7:02 AM in response to yuzername

I tested this, and indeed it appears that the gradient is applied per character.

I was not able to find an immediately solution.


A workaround is to add a rectangle of appropriate size, set its fill property to be the desired gradient, and use the text as an image mask for the rectangle. That does what you ask, but I expect that there must be an easier way. I am sure that Fox M knows the answer, and he may soon teach us all.


How do I add gradient to the text in Motion app?

Welcome to Apple Support Community
A forum where Apple customers help each other with their products. Get started with your Apple Account.