Ask Ubuntu is a question and answer site for Ubuntu users and developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

What is the easiest way to fade out and fade in elements in Python / GTK 3?

Coming from webdevelopment, my initial take on this problem was to call

c = widget.get_style_context(), c.remove_class('visible'), c.add_class('invisible')

but that didn't work out (Do I have to call something like "redraw"?)

I also added a transition to the GTK CSS.



EDIT: I might specify what I would like to achieve: I have this "statusbar" which is just a vertical container on my app (like in the screenshot on top of this page

If the mouse is not moving, I want to fade all that stuff out (also to preserve computing power // no recalculation of word- and char count) and to minimize "distraction"). I already found the appropriate event to listen to (motion-notify-event), so now I only need to add a simple fade out and a timeout.

If someone can point me to a solution, be it with clutter or cairo, I would be very happy.

share|improve this question
Fade won't work with just set visible in Gtk. You'ld need to start a loop that does something like draw the widget at absolute coordinates in the window and put something under it. Then set alpha gradually until the widget is gone. You "could" set visible to false then do a .show(), but it wouldn't "fade" it would snap. – RobotHumans Aug 27 '12 at 21:07
No, I don't mean to call "visible". I initially thought adding and removing classes would have the same effect as with HTML + CSS (change state of widget, then CSS Transform would do the rest). But this doesn't seem to work. – wolfv Aug 27 '12 at 22:03
up vote 0 down vote accepted

Well, the great thing is, it works with Ubuntu 12.10 and GTK 3.6 (is it that version number? IDK).

So basically what I am doing is setting my status bar container to INSENSITIVE via Gtk.StateFlags.INSENSITIVE).

This property is styleable via CSS. Here is my source:

def poll_for_motion(self):
    if (self.was_motion == False
            and self.status_bar_visible 
            and self.buffer_modified_for_status_bar):
        self.status_bar.set_state_flags(Gtk.StateFlags.INSENSITIVE, True)
        self.status_bar_visible = False
        self.buffer_modified_for_status_bar = False
        return False

    self.was_motion = False
    return True

def on_motion_notify(self, widget, data=None):
    self.was_motion = True
    if self.status_bar_visible == False:
        self.status_bar_visible = True
        self.buffer_modified_for_status_bar = False
        self.status_bar.set_state_flags(Gtk.StateFlags.NORMAL, True)
        GObject.timeout_add(3000, self.poll_for_motion)

And the css that complements it:

#status_bar_box GtkLabel:insensitive {
     color: rgba(255,255,255,0);
     transition: 500ms ease-in-out;

#status_bar_box GtkButton:insensitive {
    background: rgba(255,255,255,0);
    transition: 500ms ease-in-out;
share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.