I just wanted to share something I think is awesome! Adding Lottie animations and Vectary embeds are both pretty easy with Bubble (I’ll add a little more detail on that below, and no I’m not affiliated with anything I’m linking, just a Bubbler who found that they worked).
When put together you can pair a moving background with an interactive foreground. Here’s an example of what I did for my personal site.
- For context to the imagery - the related text was about approaching software and product challenges from all angles.
- The background Lottie is on a 30-second loop. The lines are moving as if they are being drawn (I thought I could upload a video here, but it doens’t work).
It seems like there are a ton of cool things that could be done with this and was excited to share.
Would be great to see what others can do with this idea!
This does need a paid account for other viewers to see, but it isn’t too expensive. You can try it out for free while you are building.
- Create your 3D model or grab stuff out of their library.
- Set up your seen and generate a “Viewer”.
You can turn on the “turntable” and control the speed to make the model turn. Users can move the object around and after a moment of inactivity it will start spinning again.
- Grab the code and paste it into an HTML Element in Bubble.
You can control the size of the animation by going into the HTML they give you and changing the “height” number to match the size of your HTML element in Bubble.
- Create your own Lottie using After Effects with the Bodymovin plugin or find an animation from the internet (Lottiefiles.com has a ton of free ones).
- If you want to control your animations you can use the LottiePro plugin on the Bubble marketplace OR
- If you are ok with the animation playing a loop without controls you can just use Lottiefiles to host them and it gives you a web player. You can just paste this code into another HTML element inside Bubble.
Keeping both as fixed-width is easiest to control, but you can let them scale for some interesting effects.