HTML Template - dynamic text & images help

General
,
1

Hi all,

Looking for a bit of help in dynamically changing images in a HTML template and potentially a better way to populate text. I’m creating these templates via After Effects with Bodymovin/Lottie.

Here is how I’m currently dynamically populating text using WebCG:

anim.renderer.elements[0].elements[0].elements[0].updateDocumentData({t: data["Value"]});

Is there a better way to do this based on ID’s instead of relying on the structure/indexes of elements?

Here is how I’m currently turning on/off different elements:

document.querySelector("#NameHere").style.opacity =  0.0;

I’ve tried using querySelector to to set the ariaLabel & innerHTML properties but these don’t seem to update on the graphic when the Update function gets called.

So how would I dynamically change a team logo for example? If there is a better method to align all these procedures then any help with syntax etc would be really helpful as I’m quite new to this.

Thanks in advance

2

I also don’t know of a better way to change the text. I am currently developing a tool that helps to automate these steps. But it is not finished yet.

Why would you wand to change (show / hide) elements? Can this not be done by animating them?

3

We sometimes need the ability to hide/show certain elements in a template. For example a dynamic lower third where you can hide/show team badges/cards/sublines etc.