Skip to main content
M
MrMark1960
Inspiring
October 23, 2020
Answered

Is it possible to manually scroll text?

  • October 23, 2020
  • 2 replies
  • 3977 views

Hi, 

I have an animation (for social media) that I want to have text over an animated background, however there are 30+ lines of text. Since there is no way to have all the text up at one time, I'll have to make it scroll/roll through. However, since people read at different speeds, I'm worried the text will move too fast or too slow. Is it possible to set up the animation so that people can manually scroll through the text (while the animation is running in the background) so that each can read at their own pace? If so, how do I do that? 

Thanks

This topic has been closed for replies.
Correct answer Conrad_C

Within After Effects, by defaultt all compositions nested in a composition continue to play back as long as the main composition is playing back, so if the main composition is looping, the nested pre-comp should also continue looping. Also, if the pre-comp is 5 seconds long and the main composition is 20 seconds long, the 5-second pre-comp will be able to loop 4 times within the 20-second main composition.

 

Keep in mind that you can loop it all you want in After Effects, but once again, when you say it’s going to “social media,” final control of video playback ultimately depends on the site you upload to. Whether it’s going to loop, and how many times, is up to the specific way that Instagram, Twitter, Facebook, etc. have each coded their sites for video playback. You upload a video to them, after that you let it go and are at the mercy of how those sites handle playback. That’s why the CSS workaround I suggested only works on a web site you control. On web sites you don’t control, those sites control how the video plays back, it’s not the same on every social media site, we often have no options to adjust that, and..…you never know when they will put out an update that changes how it works.

 

Instead, we have to adjust our presentations so that they will be successful within the lack of control we have over social media playback. Organizations with a bigger budget, or people with more time on their hands, can tailor their presentations for each social media outlet that’s important to them. For one site they might tailor a video to straight playback, no looping. For an Instagram Story they might customize their presentation not only to fit the vertical video format, but to take advantage of the opportunities of that specific outlet, like swiping up for more information or to go to a link.

 

What is most difficult, or sometimes impossible, for social media is “one solution fits all.” Either it’s one highly simplified solution that works anywhere, or multiple highly customized solutions that take advantage of each outlet’s special features.

2 replies

Conrad_C
Community Expert
Conrad_CCommunity Expert
Community Expert
October 25, 2020

If the requirement is to have an animation running with text on top that has a manual scroll bar, it may be possible to do this in two completely separate pieces on a web page you control. First create the animation in After Effects, without the text, and export that.

 

Then, on the web page itself, code it up so that the both the animation and the separate text are inside the same CSS layer (div), with the animation as a background of that layer, and then your text as HTML also in that layer, with the layer style sheet set to provide a scroll bar on overflow (set the CSS Overflow property to "scroll").

 

If you mean you want a single file that does this, that you want to upload to Instagram, Twitter, etc. then it’s probably impossible, because social media sites take rendered video formats that have no embedded interactive controls of their own, like plain H.264.

 

The other option is to edit down the text a lot, since expecting viewers to read 30 lines of text in a frame is a tall order on short-attention-span social media, whether that text scrolls manually or automatically. Also, on mobile, viewers may not see a scroll bar since mobile text fields are scrolled by swiping. You may have to design it with a prominent visual affordance that indicates that scrolling is possible. In the end, if the sheer amount of text can’t be edited down to a more standard minimal amount appropriate for social media, a manual scrolling requirement makes this whole thing very complicated.

M
MrM2
Known Participant
October 25, 2020

Thanks for your reply.

The CSS layers might be beyond my skills, and unfortunately I can't edit the text.

Do you know if if I set my background to loop, will it continue to loop even when the playhead hits the last frame? For example, if I created leaves falling and made it a pre comp, and set it to loop, and my main movie timeline is 20 seconds long, and it's for social media. Will the leaves stop falling after 20 seconds or will they continue to fall for as long as a person is viewing the animation?

R
Community Expert
Rick GerardCommunity Expert
Community Expert
October 23, 2020

After Effects cannot do anything live. Everything has to be rendered. The typical way to do a scroll or a roll is to move the layer an even number of pixels per frame. This reduces the possibility of judder (hard to look at) and aliasing problems that cause the horizontal or vertical edges of type to appear to change size. This is easiest to do with an expression. 

 

The speed of the roll or scroll with character generating hardware that is used in broadcast follows the same rules. There are specific speeds that are recommended for both roll and scroll. The speed depends on screen size and text size. There's not much you should do to mess with these established speeds. Speed also depends on the frame rate. 24 fps is much more susceptible to judder or strobing than 29.97, but even 60 fps video can have terrible judder because the retinal retention of almost all humans is pretty much the same. There are certain scroll and roll speeds that are nearly impossible to look at unless you track the moving object. 

 

A good starting point for a roll is about 6 seconds from the bottom to the top of the screen. 

 

I hope this helps a bit. Let us know if you have any other questions.

M
MrMark1960Author
Inspiring
October 23, 2020

Thanks for your reply.

I probably wasn't clear in what I was asking.

I'm wondering if it's possible, and I have a feeling it's not, to add a scrollbar to a text field? This would allow you to manually scroll the text at whatever speed, fast or slow, that you read. With 30+ lines of text on a 1080x1080 file, 6 secs would be way too fast to read it all. Even, say, 30 secs might be too fast for some, too slow for others, but if they could control the scroll, that would be best.

I probably just need to come up with some other solution.

Thanks 

Martin_Ritter
Martin_Ritter
Legend
October 23, 2020

AE can only render a video as final result. There are no interactive scrollbars in video. AE is not the right tool for this.

 

*Martin

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices