All of us developers using any text-editor from vim to sublime text to visual studio code would agree that the plugin ecosystem is what truly makes a developer's life more convenient. With that in mind, we are bringing to life a LottieFiles extension that will definitely help with your Lottie workflow.
Installation
You can browse and install extensions from within VS Code. Bring up the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of VS Code or the View: Extensions command (⇧⌘X). You may also view it in the browser here.
Search the extensions marketplace for “LottieFiles for VSCode” and click the install button to install the extension to your VS Code.
Previewing a Lottie
Click and open the Lottie JSON file using VS Code, press command + shift + p to open the command palette for VSCode, and key in “View in Lottie Player”.
Alternatively, you may right click the JSON file and click “View in Lottie Player”.
The JSON file must be opened or clicked on first for the extension to be able to run this command. Once you run the command, a new window with the Lottie player will be opened up for you as seen below.
The player window appears on the right and the Lottie JSON file is shown on the left side. The player window contains a code snippet below it, which is a ready to go implementation of the Lottie player and you may use this in your app implementation. Do note that the source file path must be changed either to a URL or a JSON string, if you wish to use a JSON string with the Lottie being placed inside your apps public folder, please read the file, parse it as a JSON and programmatically load your Lottie as shown below.
const player = document.querySelector("lottie-player");
player.load("https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json");
// or load via a Bodymovin JSON string/object
player.load(
'{"v":"5.3.4","fr":30,"ip":0,"op":38,"w":315,"h":600,"nm":"new", ... }'
);
Preview contents of dotLottie file
dotLottie is a compressed Lottie file format and you can read all about it here. Click and open the dotLottie file using VS Code, press command + shift + p to open the command palette for VS Code, and key in “Show dotLottie Contents”. The contents of a dotLottie file will not be shown inside VS Code unless this command is run on the file.
Alternatively right-click the dotLottie file and click “Show dotLottie Contents”.
Once the command is run, read-only files will be visible on the left side file navigation pane of VS Code and the Lottie player will be opened up with a preview of the Lottie. The image below shows the contents of the dotLottie file extracted out with all its parts visible.
Search LottieFiles
This function is built with the convenience of searching LottieFiles in mind, you may want to find a “toggle” animation or a “play” animation while you are building an app, you may run the “Search LottieFiles” command to key in a search term and the extension will open LottieFiles.com along with the search results loaded up.
Press command + shift + p to open command palette for VS Code and key in “Search LottieFiles” , an input will appear. Type in a keyword to search and press enter. VS Code will then ask for permission to take you to the browser where you will see the search results of the keyword.
Open Lottie Code Editor with preview
This feature is more for the dev that wants to explore the Lottie file format or make small changes to either frame rate or dimensions or even other basic properties. The Lottie JSON format is rather complex and tinkering around with the JSON object is good learning to help with the legacy of the Lottie format as a whole. The extension allows you to edit the Lottie JSON with a JSON Editor and updates the player with each change made. Debugging issues with a Lottie file or building on top of the Lottie format is made simpler with this feature.
Click and open the Lottie JSON file using VS Code, press command + shift + p to open the command palette for VS Code and key in “View in Lottie Code Editor” or right-click the JSON file and click “View in Lottie Code Editor” . This will open up a JSON editor with the Lottie loaded in. A preview Player will be attached in another tab and any changes made on the JSON editor will be reflected in the Player.
