Animated UI examples

I’m hoping to get some advice on how to handle displaying animated UI examples on my portfolio. I had planned on using .gifs like people do on Dribbble but the max upload is 4MB so it looks like I will have to go with video.

Looking into working with video has raised lots of questions. I need the videos to loop and autoplay so I was thinking of using the background video feature, however that wont work for mobile. Do I need to worry about file size or will Webflow compress the videos as needed like images? Any tips or tricks for displaying high quality animated UI examples on a portfolio would be much appreciated!

I don’t think webflow threats video (compression) any different. So the golden rule of optimizing media for the web remains intact.

Have you tried using lottie animations? You can export easily those from After effects once you got the plugin installed.

Cheers!

1 Like

I’ve had good luck using Lottie for vector animations, but this one is pretty bitmap heavy and I’m having issues with the export playback. I’ve played with different settings but the animation keeps coming out clunky and missing frames for whatever reason. If anyone has experienced this and found a workaround I’d love to hear it.

I feel your pain my friend.

I come from the old school (Dreamweaver, tables and Flash) and just getting back to the game with Webflow. True be told im still looking for that particular app or service that would let me create top interactive sites. Webflow + Lottie are the closest option. Thing is when using vectors Lottie works best, but not that much when it comes to raster files since (As far as I know) JSON won’t compress bitmap files. So compression its up to you and can bite quite a challenge when dealing with huge animations.

1 Like

I ended up figuring out a pretty decent work flow using Vimeo and the HTML embed feature to place videos. You can pass in a few parameters to autopay, loop and hide the Vimeo interface elements.