How to create this lower third?

Forum|Forum|6 years ago
June 12, 2019
1 reply
510 views

I want to recreate this lower third animation (in the video below) but with changeable colors and icons for different websites.

Now I tried to do it with morphing first, but as you morph from the circle to the rectangle you have to use bezier paths.

When I use those paths I cannot edit their parameters with the sourceRectAtTime() anymore.

Following things have to be solved:

1) Shape changes from circle to rectangle that resizes to the text that appears in it.

2) The Logo has to be inside the center of the circle and move with the resizing rectangle to the left.

Hope you can help me

This topic has been closed for replies.

Justin Taylor-Hyper Brew

Community Expert

Use a rectangle the whole time, but with roundness at max when you want it to be a circle.

Also, check out Paul Slemmer's free tool: Rigged Box which helps a ton with rigs like this: https://paulslemmer.com/rigged-box

C

conotiAuthor

Participant

I tried using the rectangle all the time but when I make it circle shaped I don't know how to edit the values right in the sourceRectAtTime part so it only changes shape back to the rectangle after a specific amount of frames and path past.

Justin Taylor-Hyper Brew

Community Expert

If you want the size to grow, then use a range mapping function like linear() or ease()

var w = textLayer.sourceRectAtTime(time).width;
ease(time, 0, 1, 100, w)

in the width param or something like that

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded