Animating tabview fade-out to show content below it


I’ve got a tabview with 4 tabs on the right side of the screen. Screen is 320x240. On one of the tabs, I want to display a reference image that is the full 320px side (the other tab contents don’t really matter, they all fit within 320-<tab_width>).

What MCU/Processor/Board and compiler are you using?

Linux Framebuffer + libinput

What LVGL version are you using?


What do you want to achieve? / What have you tried so far?

The goal is, when you move to the tab in question, if there is no touchscreen activity for a few seconds after settling on that tab, then make the tabs disappear to show the full reference image.

The image is aligned to lv_scr_act() but is still a child of its tab so it remains aligned in place even when scrolling.

Right now I’ve got this mostly working, see code below. However it is currently just instantly hiding the buttonmatrix which is a bit jarring. I’d love to be able to animate it becoming more transparent over time, however, making the buttonmatrix transparent doesn’t actually show the image behind it and instead leaves a vertical black bar the width of the tab area.

I’d love to know if there is any good way to animate the buttonmatrix/tabview going out of view to show the full object behind it. It doesn’t need to be a transparency fade in/out, it can also be a slide, rollup, etc., I just want to show the user that the bar didn’t crash and its disappearance is intentional.

Code to reproduce

Right now, I don’t have the aforementioned “buttonmatrix hides after a delay” and right now it simply hides as soon as the tab in question is selected, and unhides as soon as the screen is scrolled to the next tab.

static void tab_change_event_cb(lv_event_t *e)
    lv_obj_t *tv = lv_event_get_current_target(e);

    if (lv_tabview_get_tab_act(tv) == 0) {
        lv_obj_add_flag(lv_tabview_get_tab_btns(tv), LV_OBJ_FLAG_HIDDEN);
        /* XXX I want to animate increasing transparency over time */
        //lv_obj_set_style_opa(lv_tabview_get_tab_btns(tv), LV_OPA_TRANSP, LV_PART_MAIN);
    } else {
        lv_obj_clear_flag(lv_tabview_get_tab_btns(tv), LV_OBJ_FLAG_HIDDEN);
        /* XXX I want to animate increasing transparency over time */
        //lv_obj_set_style_opa(lv_tabview_get_tab_btns(tv), LV_OPA_COVER, LV_PART_MAIN);

static void dummy_setup_func()
    tv = lv_tabview_create(lv_scr_act(), LV_DIR_RIGHT, TAB_W);
    lv_obj_add_event_cb(tv, tab_change_event_cb, LV_EVENT_VALUE_CHANGED, NULL);

    /* Set tabview background color of the main views */
    lv_obj_set_style_bg_color(tv, lv_color_black(), LV_PART_MAIN);

    tab1 = lv_tabview_add_tab(tv, "Pinout");
    lv_obj_clear_flag(tab1, LV_OBJ_FLAG_SCROLLABLE);
    image = lv_img_create(tab1);
    lv_obj_align_to(image, lv_scr_act(), LV_ALIGN_TOP_LEFT, 0, 19);
    lv_img_set_src(image, &...);

Updated to v8.3.9, setting fully transparent on the buttonmatrix still results in a black bar down the edge where the buttons used to be, content behind it is not visible still.

I would love any information on how to make this work. Thanks!

I guess the best option you have would be some sort of slide out / in animation… Check the docs: Animations — LVGL documentation

I have never used this myself so I can’t give you any real help with implementing it further, but the examples in this documentation might be enough.


I looked at moving the whole tabview originally and I was either doing it wrong or it suffers a similar issue where I can get most of the things off screen but some part of it hangs around. If anyone has an example of this, I’d love to see it.


could possibly show what parts hang around?

I think what might be worth a shot, is to make some sort of container object to put the tabview inside (as a child), and move that instead. If I understand correctly the tabview itself is just a collection of objects with some extra functionality to handle the tabs being shown, it might just respond weirdly to animations.