Lottie

Basic Lottie Test

Styling & Customizing

This is the default Webflow FORM configuration;

  • Converted SVG to Lottie using;
    https://lottiefiles.com/svg-to-lottie
  • > It generated a .json file
  • > Uploaded this to assets
  • > Bound it to a Lottie element in my page
  • + Can set background, if transparent
  • DEMO 2
  • https://lottiefiles.com/55510-atom-css-customisible
  • https://codepen.io/croqo/pen/oNBLEgG

DEMO

This is an SVG that was converted to a Lottie. The Lottie is loaded in assets ( up to 4MB file size ), and referenced in Webflow using a Lottie element.

A class is assigned to the Lottie for reference, and a small piece of custom CSS ( see below the lottie ) is placed on the page to apply the currentColor to targeted parts of the Lottie's generated SVG.

HTML Embed

HTML Embed

How to implement

See the designer view of this demonstration by clicking the button at the top.
Then view this part of the layout for details;

01 The basic process

Coming soon.