Media

Lottie Animation

Plays a Lottie .json vector with autoplay, hover, on-scroll or click triggers.

Live demo

See it in action

The markup

Clean, lean code

This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.

<section>
	<div class="fw-container">
		<div class="fw-row">
			<div class="fw-col-12 d-flex flex-column align-items-center">
				<div class="lottie lt-375be427 fw-lottie fw-lottie--align-center" style="--lt-max:320px;" data-lottie="1" data-src="https://assets10.lottiefiles.com/packages/lf20_touohxv0.json" data-trigger="autoplay" data-loop="1" data-speed="1" data-direction="1" data-reverse-hover="0">
					<div class="fw-lottie__canvas">
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

To learn more about the Lottie Animation shortcode, please check out the online manual here.

Free & open source

Build with this element, free.

Install the framework and the Bootstrap 5 theme, then drag this element into any page.

Get the framework free