Dec 27, 2019
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:

Share:

The videos Kurzgesagt channel creates are so beautifully animated, that I almost forget that I learn so much while watching them!

Might also interest you:

3d Video Slider (swiper.js)

Cloneable
CMS
JavaScript

A 3d slider with video items, plays and pauses on click & slide change.

Read more
White Arrow icon

Glossary

Cloneable
JavaScript
CMS

A clonable for creating an Alphabetical glossary

Read more
White 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
White Arrow icon