Lottie Animation in Taptop

What is Lottie and Why It’s So Useful

Lottie is an animation format developed by Airbnb that allows you to render animations exported from After Effects (using the Bodymovin plugin) directly in the browser.

• Lightweight — much smaller than videos or GIFs
• Supports transparency and scalability (SVG-based)
• Perfect for looping or interactive animations
• Ideal for web and mobile UI animation

How to Embed Lottie in Taptop

Step 1 — Add an Embed Code Block

In Taptop’s visual editor:

• Drag the Embed block onto the canvas
• Set the height and width to match your animation size (e.g. 300×300 px or 100% width)

The size of the embed block determines how the animation will be displayed. If your Lottie is responsive, you can use width: 100%.

Step 2 — Inside the embed block, paste the following code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.4/lottie.min.js"></script>
<script>
  lottie.loadAnimation({
    container: document.getElementById('lottie-animation'), // Target container
    renderer: 'svg',             // Rendering method (svg recommended)
    loop: true,                  // Loop the animation
    autoplay: true,              // Start playing automatically
    path: 'https://site-95943.taptop.site/f/showreel-grid-mobile-remix.json' // Replace with your own JSON URL
  });
</script>

What Each Line Means

• container — The element the animation will be injected into (#lottie-animation)
• renderer: 'svg' — Defines the render type; SVG ensures broad compatibility
• loop: true — Enables infinite looping
• autoplay: true — Starts playing immediately on load
• path — URL to your .json Lottie animation file

Where to Get Your .json Link

You can upload your .json file directly to the Assets section in Taptop. Once uploaded, just click on the file and copy the direct URL — then paste it into the path field.

Why This Approach Works So Well

• Doesn’t slow down your site
• Easily replace or update animations
• Compatible with all modern browsers
• No external plugins required

If you want to bring motion and interactivity into your Taptop project — Lottie is a perfect solution.
And even while we wait for a native widget, this manual method gives you full control today