Lottie Animation
Available to PRO and higher subscribers.
This widget allows you to display an animated Lottie image. Lottie is a JSON based file format for vector graphics animation. It is intended as a lighter alternative to other animated graphic file formats (GIF, APNG, ...). It is commonly used in applications and web pages.

The widget has the following controls:
- 1.URL ADDRESS: The URL to .json file.
- 2.Auto-Play: Play the animation once when the device is initially displayed in the app.
- 3.Play in Loop: Play the animation repeatedly.
Select or create a datastream of data type string. The datastream value of “play” will cause the animation to play, and the value of “stop” will cause the animation to stop.
You can change the properties of the widget from your hardware using the command:
Blynk.setProperty(vPin, "widgetProperty", "propertyValue");
Where:
vPin
is: virtual pin number the widget is assigned towidgetProperty
: property you want to changepropertyValue
: value of the property you want to change
Don't put
Blynk.setProperty()
into the void loop()
as it can cause a flood of messages and your hardware will be disconnected. Send such updates only when necessary, or use timers.
You can change the properties url, autoplay, and loop of the widget from your hardware, or via an HTTP API. Substitute ‘V2’ in the examples below with the datastream virtual pin reference (V0, V1 ...V255) you have configured for this widget. Make sure any string values are URL encoded.
Blynk.setProperty(V2, "url", "https://mechatronicsolutionsllc.com/Blynk_animated_image_breathing.json");
// Change image URL via hardware
Blynk.setProperty(V2, "autoplay", "true"); // Start the image animation
Blynk.setProperty(V2, "autoplay", "false"); // Stop the image animation
Blynk.setProperty(V2, "loop", "true"); // Set the image to replay from the beginning
Blynk.setProperty(V2, "loop", "false"); // Set the image to stop at the end of the animation
get
https://{server_address}
/external/api/update/property?token={your 32 char token}&pin={your vPin}&{property}={value}
Updates the Datastream Property and all assigned Widgets
You can update your hardware to the latest datastream value from Blynk.Cloud after your hardware went offline, and then came online again.
BLYNK_CONNECTED() { // Executes every time Blynk is connected to the Blynk.Cloud
Blynk.syncVirtual(V2); // Synchronize variable V2 with the latest value stored in Blynk.Cloud
}
Use the
Blynk.virtualWrite()
command to set the datastream value to “play” to cause the animation to play, and the value “stop” to cause the automation to stop playing. const uint32_t TIMER_INTERVAL_V_MS = 15000;
uint32_t timerLastVn = 0;
uint8_t toggle = 0;
void timerVn(uint8_t vPin) {
if (timerLastVn > millis()) timerLastVn = millis();
if ((millis() - timerLastVn) > TIMER_INTERVAL_V_MS) {
if (toggle == 1) {
toggle = 0;
Blynk.virtualWrite(vPin, "play"); // play animation
} else { // toggle == 0
toggle = 1;
Blynk.virtualWrite(vPin, "stop"); // stop animation
}
timerLastVn = millis();
}
} // timerVn()
void setup() {
} // setup()
void loop() {
timerVn(V2)
} // loop()
Use the Blynk HTTP API to set the datastream value to play to cause the animation to play, and the value stop to cause the automation to stop playing.
get
https://{server_address}
/external/api/update/property?token={your 32 char token}&{pin}={value}
You can configure the hardware to respond to a change in a datastream value by configuring the
BLYNK_WRITE()
command. BLYNK_WRITE(V1) {
// Called when the datastream value for V1 changes
String value = param.asStr();
if (value=="play") {
Serial.println("V1 'play' command received'");
} else if (value=="stop") {
Serial.println("V1 'stop' command received'");
} else {
Serial.print("Unexpected V1 value of: ");
Serial.print(value);
Serial.println("");
}
}
Last modified 4mo ago