Highlighted

Animate text line by line

New Here ,
Jun 10, 2019

Copy link to clipboard

Copied

First post on Adobe Forums so apologies if this has been answered elsewhere but I haven't been able to find it!

Is it possible to animate text line-by-line? Specifically changing the opacity so it moves from the top to the bottom of the text as it transitions in by line.

At the moment, I'm creating the text as a symbol then using the Alpha opacity to change frames then use classic tween to animate the opacity. However I'm unable to get this to move say from the top anchor and transition throughout each line of text.

See example here – AMEX

Adobe Community Professional
Correct answer by Myra Ferguson | Adobe Community Professional

Try making a custom motion preset and applying it to each line. Then offset each line. Creating and Applying Motion Presets in Adobe Animate CC

TOPICS
Discussions

Views

1.0K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Animate text line by line

New Here ,
Jun 10, 2019

Copy link to clipboard

Copied

First post on Adobe Forums so apologies if this has been answered elsewhere but I haven't been able to find it!

Is it possible to animate text line-by-line? Specifically changing the opacity so it moves from the top to the bottom of the text as it transitions in by line.

At the moment, I'm creating the text as a symbol then using the Alpha opacity to change frames then use classic tween to animate the opacity. However I'm unable to get this to move say from the top anchor and transition throughout each line of text.

See example here – AMEX

Adobe Community Professional
Correct answer by Myra Ferguson | Adobe Community Professional

Try making a custom motion preset and applying it to each line. Then offset each line. Creating and Applying Motion Presets in Adobe Animate CC

TOPICS
Discussions

Views

1.0K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 10, 2019 0
Adobe Community Professional ,
Jun 10, 2019

Copy link to clipboard

Copied

Hi.

If you want a simple line by line effect, you can use a mask reveal animation while you animate the alpha of the symbol instance.

If that's too limited for your, your options are to separate the the text field in different lines, turn each line into a different symbol instance and then animate them regularly.

For more advance and dynamic cases, you're gonna have to use AS3.

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 10, 2019 1
New Here ,
Jun 10, 2019

Copy link to clipboard

Copied

Thanks João for the answer, much appreciated.

The line by line masking doesn't seem to have the same flow as animating each line (with the Alpha effect), and for scale purposes, separating each line into a symbol could get pretty time consuming.

With the example provided, do you think that was coded with Animate and AS3?

Do you know of any good resources for AS3 that could point me in the right direction for this issue?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 10, 2019 0
Adobe Community Professional ,
Jun 11, 2019

Copy link to clipboard

Copied

Try making a custom motion preset and applying it to each line. Then offset each line. Creating and Applying Motion Presets in Adobe Animate CC

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 11, 2019 0