LottieFiles Animations

Looking animation which are quite engaging and crafter by top in class motion designers to use in your next web design project? Try this Gutenberg widget, which will help you to achieve that just by using JSON code made from LottieFiles.

Upload AE to LottieFiles and Use It

Easy to manage JSON based

For Animation and Interactive Designers

Use collection of world’s best motion designers

TPAG Single Page Image

Best Lottiefiles Block

For Gutenberg Page Builder

The plus addons have the best Gutenberg widget to implement lottieFiles. It have various options to choose from and It will help you website to reach at next level with most advanced and light weight animations. It is best way to implement lottieFiles in WordPress Using Gutenberg Page Builder.

On Scroll Parallax

LottieFiles animation in Gutenberg will work while you scroll on this section. you can make it working based on scroll in Gutenberg section (row) or you can make it fixed and setup on scroll Parallax Option. Scroll this page till the end to look at that option.

Animations On Individual Hover + Link

You also have options for Hover animation, Such as

Hover effect based on Section Enter

Hover effect based on Column Enter

Hover Effect on Individual Widget

Animation on Click with Custom Delay time

You can show your animation fully after the click. You can add your custom delay before link to proceed.

Viewport Animation

This method is to start animation when visitor reach certain view port of website.

Mouse In and Out Animation

Build Your Website
Lorem Ipsum is simply dummy text for the LottieFiles Animation.
Easy to Use
Lorem Ipsum is simply dummy text for the LottieFiles Animation.
High Performance
Lorem Ipsum is simply dummy text for the LottieFiles Animation.
Unique Elements
Lorem Ipsum is simply dummy text for the LottieFiles Animation.

Fixed On Scroll Lottie Files Animation

🔥🔥SPECIAL DEMO MADE WITH LOTTIEFILES🔥🔥

Why Lottie is the future?

Lottie is an open-sourced animation file format like no other. It is smaller with higher quality and allows for you to create animations that can be interacted with. So versatile, you can easily implement it on almost all platforms out there!

Source : LottieFiles Official Website

Lottie Animation
High quality (60 frames/sec) with interactivity and more…
68KB
Animated GIF
Huge file, poor quality
69KB
PNG Sequence
30 Images, Huge file, CPU intensive
69KB

It doesn’t end here. There are 50K+ Animations waiting for you.

How to Import?

Visit Lottie Files using https://lottiefiles.com/

Step 1

Login/Sign Up on Lottie Files

Step 2

Search & Customise any Animation and Download JSON file.

Step 3

Copy-Paste JSON code in Widget and Select appropriate Style for that.

Step 4

Credits: H1 Marketing Digital , Mohammed Zourob , Bas Damming , Lordicon , Abinash Mohanty , Eddy Gann , Arnaud Derbey , Shinan , Alexander Beliavsky , Sharif Khaleel , Wim Marynissen , Hicy Wonder