Skip to main content
SemDonkers197
SemDonkers197
Participant
November 5, 2019
Question

Textbox Collision in After Effects

  • November 5, 2019
  • 2 replies
  • 905 views

Hi!

 

I'm creating templates for a concert promotor in the Netherlands (Essential Graphics) . Right now i have multiple text layers that are below eachother. I can fill out: Artist - date - venue in the EG panel and the text will change accordingly. However if a venue or date consists of multiple lines of text they will overlap. Is there a way AE can see if the textboxes collide and position them under each other again? 

 

Screenshots: 

https://ibb.co/SKD9nvQ
https://ibb.co/Xj6sP3L

 
 

Sem 

This topic has been closed for replies.

2 replies

Roland Kahlenberg
Roland Kahlenberg
Legend
November 5, 2019

The solution you are looking for is Reactive Design. This is different from what has been commonly referred to as Responsive Design. Responsive Design has become synonymous with auto-resizing text boxes. This largely works between one text layer and one shape layer. Variations may include two text layers and a single responsive text box.

 

For your case, Reactive Design is required since one or more layers react in its size and/or position to the size and/or position of at least one other layer. Here's an example I worked on last month.

 

https://www.facebook.com/broadcastGEMs/videos/2601351253237921/

 

Implementing Reactive Design into templates or MoGRTs is a little more tricky than Responsive Design but it isn't take much more difficult. You'll be using most of the same Expression methods and as Lutz has mentioned, sourceRectAtTime is main sauce. 😉

 

Very Advanced After Effects Training | Adaptive & Responsive Toolkits | Intelligent Design Assets (IDAs) | MoGraph Design System DEV
SemDonkers197
SemDonkers197Author
Participant
November 21, 2019

Thankyou for your quick reply! The video you added is exactly what i'm looking for. The boxes automaticaly start moving downward when another box gets bigger. However, i'm very new to after effects and I have no idea where to start...

Right now the boxes automaticaly resizes to the text on top, using SourceRectAtTime. Could you maybe give me an example of a code that might work? I hope it's not a lot of trouble. 

 

Sem

SemDonkers197
SemDonkers197Author
Participant
November 21, 2019

btw im just asking because googling 'Reactive Design' only gives me results of responsive design which is, as you say, quite different 🙂 

Mylenium
Mylenium
Legend
November 5, 2019

AE can't do any of that natively. You have to apply expressions using sourceRectAtTime() to determine the bounding boxes and then have additional code to do the actual positioning or reformatting. a web search will turn up enough examples. However, since this still tends to be not 100% reliable I would suggest instead of trying to be super fancy and smart you simply design multiple templates to cover these scenarios, be it just for actually keeping the templates less confusing.

 

Mylenium

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