I painstakingly created a decryption animation layer by layer, since the AE “decryption” expression route means having to export images frame by frame, reimport into AE, and then convert to JSON, which garners a pretty large lottie file at over 3MB.
Within AE the animation looks great, but upon export the HTML demo files shows overlapping text. What would cause this?
The text part of this animation is 58 layers of text. Frames 1-51 have four layer (for four colors), where layers 52-58 have 1-2 layers (for one to two colors). I selected Bodymovin for the export and made sure to select “Glyph.”
Unfortunately, very often text causes problems with animation (from my experience) and there can be dozens of reasons. It’s perfect that you tried Gliphs on/off, this excludes one of them. Is it possible for you to share the project?
Hi, I had tried Glyphs on and then off, and some other things, but ultimately what worked was laboriously creating outlines for each text layer. Thanks for reaching out to help
The overlapping text in your Bodymovin HTML demo, despite looking fine in After Effects, is likely due to exporting 58 individual text layers. To fix this, try pre-composing all text layers into a single composition in After Effects before exporting with Bodymovin and “Glyph” selected, or manually convert the text layers to shapes within AE and then export. Examine the generated HTML for potential CSS issues and consider simplifying your text animation for better efficiency and rendering.
