Background

+

Visual Studio Code

Improve your Development Workflow

with the LottieFiles plugin for Visual Studio Code

Via Visual Studio Marketplace

Watch video

Visual Studio Code
Visual Studio Code
Visual Studio Code

Use Lottie animations with ease within VS Code

Preview Lottie files

Preview Lottie files within VS Code

The LottieFiles extension lets you preview Lotties and dotLottie file contents without leaving the VS Code app.

Show dotLottie contents

Show dotLottie contents

Extract and view the contents of a dotLottie file (a compressed Lottie file format) in VS Code.

Search LottieFiles

Search LottieFiles

The “Search LottieFiles” function makes finding the perfect toggle or play animation for your app convenient. Run this command within VS Code to search.

Edit Lottie JSON

Edit Lottie JSON files

The Lottie code editor allows you to make changes to frame rate, dimensions, and other properties of Lottie JSON files, while showing your changes on an accompanying player.

Why use Lottie animations?

Why use Lottie animations?

Faster page load
Faster page load
Faster page load
Faster page load

Faster page load speeds

Faster page load speeds

Lotties are 600% smaller than GIFs. This means being able to animate your site – without slowing it down.

Stay sharp at any resolution
Stay sharp at any resolution
Stay sharp at any resolution
Stay sharp at any resolution

Stays sharp at any resolution

Stays sharp at any resolution

Lottie animations can be scaled up or down without pixelating. No matter the size, they always stay sharp.

Fit brand's visual identity
Fit brand's visual identity
Fit brand's visual identity

Fits your brand’s visual identity

Customize Lottie animations to fit any brand identity. It’s quick and easy with the free Lottie Editor.

Fits your brand’s visual identity

Customize Lottie animations to fit any brand identity. It’s quick and easy with the free Lottie Editor.

Fits your brand’s visual identity

Customize Lottie animations to fit any brand identity. It’s quick and easy with the free Lottie Editor.

Beginner's guide to Lottie
Beginner's guide to Lottie
Beginner's guide to Lottie
Beginner's guide to Lottie

Learn Lottie basics with animation experts

Learn Lottie basics with animation experts

Learn animation principles, techniques, and how to use After Effects to create Lottie animations with Salih Abdul-Karim, Design Lead at Airbnb.

FAQ

FAQ

FAQ

What is a Lottie?

A Lottie file is a JSON-based animation file format that uses a textual, descriptive representation of the animation elements and movement towards a smaller file size and platform-independence, resolution independence and variable frame-rate during animation playback. Open-source and free Lottie players exist for the web, iOS, Android, Windows and other platforms.

What is a Lottie?

A Lottie file is a JSON-based animation file format that uses a textual, descriptive representation of the animation elements and movement towards a smaller file size and platform-independence, resolution independence and variable frame-rate during animation playback. Open-source and free Lottie players exist for the web, iOS, Android, Windows and other platforms.

What is a Lottie?

A Lottie file is a JSON-based animation file format that uses a textual, descriptive representation of the animation elements and movement towards a smaller file size and platform-independence, resolution independence and variable frame-rate during animation playback. Open-source and free Lottie players exist for the web, iOS, Android, Windows and other platforms.

What is a Lottie?

A Lottie file is a JSON-based animation file format that uses a textual, descriptive representation of the animation elements and movement towards a smaller file size and platform-independence, resolution independence and variable frame-rate during animation playback. Open-source and free Lottie players exist for the web, iOS, Android, Windows and other platforms.

What is a dotLottie?

What is a dotLottie?

What is a dotLottie?

What is a dotLottie?

How do I install the LottieFiles plugin for VS Code?

How do I install the LottieFiles plugin for VS Code?

How do I install the LottieFiles plugin for VS Code?

How do I install the LottieFiles plugin for VS Code?

How can I preview a Lottie on VS Code?

How can I preview a Lottie on VS Code?

How can I preview a Lottie on VS Code?

How can I preview a Lottie on VS Code?

Show dotLottie contents

Show dotLottie contents

Show dotLottie contents

Show dotLottie contents

How can I search for LottieFiles animations in VS Code?

How can I search for LottieFiles animations in VS Code?

How can I search for LottieFiles animations in VS Code?

How can I search for LottieFiles animations in VS Code?

What can I do with the Lottie code editor in VS Code?

What can I do with the Lottie code editor in VS Code?

What can I do with the Lottie code editor in VS Code?

What can I do with the Lottie code editor in VS Code?

Check out our support page for more.

Motion made simple

Use Lottie animations with ease within VS Code.