White Arrow icon
Back to all Elements

Modal Lottie Transition

A full screen close/open animation with lottie

A clonable project using lottie animation to transition a modal opening and closing.

The only line of code used is to make the lottie element "transparent" for the pointer:

pointer-events: none;

Copy

Best thing is that you can look under the hood and clone this project, so you can figure out how to do one yourself ;)

Preview:

browser mockup
Share:
Heart icon

Michael's Vsauce was my gateway Youtube channel to the world of fun educational vlogs. This was the 1st video I stumbled upon.

Might also interest you:

Glossary

Cloneable
JavaScript
CMS

A clonable for creating an Alphabetical glossary

Read more
Blue arrow iconWhite Arrow icon

Desktop Grid, Mobile Slider

Cloneable
Tricks
Layout

Change Webflow's Slider to act as a "regular" grid block on desktop, but go back to Slider on Tablet and smaller screens.

Read more
Blue arrow iconWhite Arrow icon

CMS Autocomplete

Cloneable
CMS
JavaScript

A short JavaScript code for transferring a CMS list into an autocomplete on an input field.

Read more
Blue arrow iconWhite Arrow icon