Lottie and Gif in 3D - New animated materials

Adding animated materials and textures to your designs is a fantastic opportunity to make your embedded 3D objects on the web more engaging. Vectary is the only 3D design platform that allows you to import not only Gif as animated material but also Lotties, a format ideal for optimized web performance. Animated textures are great for showcasing UI or adding a special effect to the surface.

‍

“With this new release, Vectary is becoming the hub for product designers, motion designers, 3D artists and developers. I can imagine a new market of Lotties more focused on textures for 3D assets.” Daniel Nisttahuz, Principal Product Designer, Lottiefiles

‍

“Creating animations requires quite a few clicks. Sometimes, you need just a tiny movement to achieve depth and get immersed. Adding an animated texture creates this result and it's just two clicks away.” Andy Klement, Head of Research at Vectary

‍

The fact that this feature is web-based makes it very accessible and easy to integrate with any workflow (Figma, Miro, Pitch, Webflow). The design potential and the flexibility of working with Vectary will be beneficial for designers focused on user experience and content creation.

‍

“I use Lotties and I use Vectary quite often because of their web-based flexibility. Being able to combine the two, lets me offer more services to my clients.” Apostolos Roussas, Director, Motion artist at CandyMustache.

‍

How to get animations to Vectary

There are several options for how to get animations to Vectary:

1. Place animated Lottie files or .gifs as a texture. Select the object and then choose Animation in the Color settings. Import the file or use the link to the online file. Vectary loads it automatically. To see the animation, go to Preview mode. To remove the animation, select Solid.

‍

2. Load the animation in various Material Properties to achieve impressive results. 

- To make it glow, import it in Emission. Add Bloom in the Environment settings for extra glow. 

-  Load the animation as a Normal map setting to change only the relief.

‍

3. Import the animation as a separate object on the scene. Drag and drop the file onto the scene, or copy-paste the link. Lottie file or .gif will behave as a separate object. Use the Gizmo to move it on the scene. 

Share the scene as a link or embed it on your website for a beautiful effect

“I can now introduce 3D animations in Webflow with ease. This feature opens up a whole new world of opportunities.“ Joseph Berry, Freelance Experience Designer

‍

‍

‍