src

Sets or gets the source of the Lottie animation.

Description

Setting the src property changes the displayed Lottie element to the Lottie animation found at the specified src value.

Getting the src property returns the source of the current Lottie animation.

The src property can either be an external Lottie animation URL, for example, 'https://assets6.lottiefiles.com/private_files/lf30_vuxs5lpt.json', or a valid Lottie JSON.

A valid Lottie JSON file should follow this schema animation.json file. While your Lottie JSON file doesn't need all the key-value properties listed in this file, it must include the following properties and types for your Lottie JSON file to be valid.

Properties	Type
"w", "h", "ip", "op"	Number
"assets", "layers"	Array of objects

Tip: To set the src property to a valid Lottie JSON, you can put it in a public file and import it in your page code.

Type:

stringRead & Write, default value is Current URL in the UI

Was this helpful?

Get the Lottie animation's source URL

Copy Code

1let lottieSource = $w('#myLottie').src;
2// 'https://assets10.lottiefiles.com/private_files/lf30_0ffmp6vx.json'

Get the Lottie animation's source file

Copy Code

1let lottieSource = $w('#myLottie').src;
2
3/* 
4  {
5    "v": "5.7.6",
6    "fr": 60,
7    "ip": 0
8    "op": 121
9    "w": 2250
10    "h": 3177
11    "nm": "gatito final2 1"
12    "ddd": 0
13    "assets": [...]
14    "layers": [...]
15    "markers": [...]
16  }
17*/

Set the Lottie animation's source to an external URL

Copy Code

1$w('#myLottie').src = 'https://assets10.lottiefiles.com/private_files/lf30_0ffmp6vx.json';

Set the Lottie animation's source to a valid JSON file

This example demonstrates how to import a valid JSON file to your page code.

Copy Code

1/*************************************
2 * Public code - myLottieJsonFile.js *
3 ************************************/
4
5export const myLottieJson = 
6{
7  "v":"5.7.6",
8  "fr":60,
9  "ip":0,
10  "op":121,
11  "w":2250,
12  "h":3177,
13  "nm":"gatito final2 1",
14  "ddd":0,"assets":[],
15  "layers":
16  [
17    { "ddd":0,
18      "ind":1,
19      "ty":4,
20      "nm":"path2009"
21    },
22    { "ddd":1,
23      "ind":2,
24      "ty":6,
25      "nm":"path2010"
26    }
27  ]
28};
29
30
31
32/*************
33 * Page code *
34 ************/
35
36import { myLottieJson } from 'public/myLottieJsonFile.js';
37
38$w.onReady(function () {
39  $w('#myLottie').src = myLottieJson;
40});