Animation errors when transferred to device

Hey everyone. I have been working with lvgl for a while, and recently got into squareline. I can get buttons, events, images, widgets to work perfectly but I am having issues with animations when transferred to the device. The animation looks good on squareline but once i export it and try to run it, I get weird results.

What i want: two panels to change in opacity. The first from 0-255 and the second from 255-0, the times are the same, one is red and one is black so its a nice transition.

What i get: Once i click the button, the place where the panel is located goes white, then at the end of the transition(was set to 3000) the red panel appears, then goes away. It reappears 3 seconds later(3000 ms). It is as if the panel can only render itself on the device at the end of the animation, or when no animation is acting upon it.

Final notes: The same issue occured when I tried to run the e_bike demo. The pictures and graphics were fantastic but the animation for the battery(like the glowing aspect of it) did not appear on the device yet it was on squareline. I am wondering if there is an LVGL configuartion to use animations.

I used LVGL 8.3.3 on my device(ESP32S3 TFT SPI) using squareline 1.3.1

I have a video converted to .mp4 ready to be attached but I am a “new user” so I cannot upload attachments.

Here is a video of squareline

And here it is on my device

Edit: finally not a “new user” :confetti_ball:


I think you need to enable LV_COLOR_SCREEN_TRANSP in lv_conf.h.

Note that, in LVGL v8.3 the simple opacity animations are quite slow. I recommend creating a custom animation where you can animate the bg_color and/or bg_opa.

1 Like

appreciate the feedback, i’ll give both of those a try