Streaming live at 10am (PST)

Hide one element until another element has loaded

Hey folks. I have a lottie animation that sits on top of an image. Because these elements are meant to be viewed together, and because the lottie animation is much slower to load, I’d like to know if it’s possible to only display the image when the lottie animation has fully loaded. Can anyone offer instructions or ideas on how this might be achieved? Thanks in advance.

You can craft on OnLoad IXthat is hiding the image by default, and then shows it. You’ll set the Animation on the “When the page has finished loading” trigger so that you’re sure the Lottie anim is loaded. You can also give the same treatment to the lottie anim withing the same IX.

image

I often do this for heavy lottie anims.

1 Like

Of course! Not sure why I didn’t think of that. I’ll give that a try thanks.

While we’re on the topic of heavy lottie anims, mine is currently sitting around 6mb, which I’ve got down from 11mb by increasing the compression setting on Bodymovin. Are there any tips you can share for getting the file size down to something more reasonable?

YES!

You must have PNG images in your AE anim and there is probably a possibility that you can halve the weight of your anim.

Bodymovin is very bad at compressing anything. It’s worse than most of the 3rd party solutions.

There’s something you can do: compress your resources yourselves the best you can. Use Optimage app, or TinyPNG online, or both. When you’re at your max, add your resources in AE (or just sap them or compress the sources).

In Bodymoving options, set it to use your original resources, so it won’t recompress them, ending in a twice bigger file for each (!).

I halved most of my Lottie anims since this option appeared a few months ago.

PS your nickname is hilarious, I wish I was named Mark so I cold use it too :joy:

1 Like

so most likely you can achieve better results if you don’t use lottie but a video instead - and if you want to use the lottie then the best bet is to redo it but using shape layers in AE so that you are dealing solely with vectors and not raster images…

1 Like

Lol thanks. But there can only be one Marklovin :smile:

Good call using TinyPNG or Optimage. I’ll give that a shot. I use TinyPNG with static PNGs a lot and it’s always really good.

@IVG I had to use a PNG sequence and lottie for the alpha transparency because it’s rotoscoped from a video, so not possible to convert to vector either. I’m surprised it worked to be honest, but stoked it did. I played around with getting alpha transparency working with a webm file but was unsuccessful, whatever I tried webflow just displayed the alpha channel as black.