How to create animated widgets using tkinter

Posted by


Creating animated widgets in Tkinter can add an engaging and dynamic element to your GUI applications. In this tutorial, we will go through the process of creating animated widgets using the Tkinter library in Python.

Step 1: Import the necessary modules

First, you’ll need to import the Tkinter module and any other modules that you’ll be using in your application. To create animated widgets, we will also need the after method from the Tkinter module, which allows us to schedule the execution of a function after a certain amount of time has passed.

import tkinter as tk

Step 2: Create the main application window

Next, you’ll need to create the main application window using the Tk class.

root = tk.Tk()
root.title("Animated Widget Tutorial")

Step 3: Create the animated widget

Now, we can create the animated widget. For this tutorial, let’s create a simple animated label that moves horizontally across the window.

label = tk.Label(root, text="Hello, World!", font=("Arial", 12))
label.pack()

def animate_label():
    x, y = label.winfo_x(), label.winfo_y()
    if x < root.winfo_width():
        label.place(x=x+1, y=y)
        root.after(10, animate_label)

animate_label()

In the animate_label function, we get the current x and y coordinates of the label using the winfo_x and winfo_y methods. We then check if the label is still within the bounds of the window’s width. If it is, we increment the x coordinate by 1 and move the label using the place method. We then schedule the animate_label function to be called again after 10 milliseconds using the after method.

Step 4: Start the main event loop

Finally, we need to start the main event loop to display the animated widget.

root.mainloop()

That’s it! You have successfully created an animated widget in Tkinter. You can customize the animation by changing the movement direction, speed, and other properties of the widget. Experiment with different widgets and animations to enhance the visual appeal of your GUI applications.

0 0 votes
Article Rating

Leave a Reply

22 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
@luuanh6200
14 days ago

appreciate your work so much. Thanks

@nui9781
14 days ago

Having real dramas not getting the slide panel to stick to the frame during resizing etc. If i resize or click on the main window – the panel drops to the back. If i drag the window right – It drops behind the root window. Bloody annoying

@MaxPersia-p1t
14 days ago

oh man you are awsome

@七人の侍-b1q
14 days ago

Nice

@digitalmachine0101
14 days ago

Good information

@Nicco71088
14 days ago

If you're constrained to use the place method, your widget's position is absolute, meaning the window might not be resizable. Additionally, if you resize the window, the widget may not adapt to the new size. Is this correct? Is there a solution for this?

@gustavorosas-dev
14 days ago

@hugoostiz1
14 days ago

Great video! Really helpfull and very clearly explained. I however have been dealing with some issues with animation and functions in general that I don't notice happening to you. Basically, running any function complitely freezes the app until the code in that function is over. Animation just won't render, in this case the button will move to the last position after some time. To solve this I've started using threading to separate the mainloop function and any other function triggered by the widgets, but I'm really curious as to why you don't seem to have this same issue. Anyway, thank you so much for the lesson!

@mrdave4735
14 days ago

🎉Thanks for the informative videos, they are well presented and very easy to understand. The best I've come across so far. Thanks for the effort you have gone to. 😊

@sagad223h6
14 days ago

You R The Best I Have Ever Seen!

@sonu-jangir
14 days ago

19:22 When my full attention was on this and sir you pressed the button and this button itself started moving to the right, I could not stop laughing.
.
Sir you are really awesome and humble.❤

@pepe60735
14 days ago

Thank you so much. It is very useful and easy to understand.

@JM_Tushe
14 days ago

That's pretty dang cool, thank you!

@omid7287
14 days ago

this animated sidebar is in the back of window elements like frame and label, so you can't use it on another window with content.
anyone has any solution for that?

@Pranjalrocks
14 days ago

please tell me how i can change the background colour of frame?

@EmptyPantryEntrees
14 days ago

Your videos are an absolutely fantastic resource for someone like me. Greatly appreciate the effort and time you put in here!!👏🏼👏🏼

@xzex2609
14 days ago

As the documentation recommends , that to never use Place method for geography management , for reasons such " If you want to insert a widget at the top, you have to correct the positions of every other widgets below." … now consider that we want to Animate them and that worsen the problem hundred times more.
But I really Appriciate this tutorial , it is really great that now we have the simplicity of tkinter , with the modern look of other GUIs . I recently wanting to learn Kivy , and I hope find something in your channel about it . I learn PiSimpleGUI from Clear code . and lots of other things thanks to you

@xzex2609
14 days ago

I build a mine sweeper game with CTk , and instead of mine cells I choosed the picture of the dictator of Iran (the most hated children killer) pops out in the Button , But I Thinking if I Find a way that widget expand to all the frame . after all the game is ending when you capture one Ayatollah. and this give me an Idea to how pop-out an animated picture of him filling the whole screen

@xzex2609
14 days ago

Question , I have a Frame , and in this frame color is black , but when I put Button in it ( I Don't know if the size of it is related or not ) but the frame color will change to grey ( Default color of the CTk.Frame . an Any one help me with that ?? ( only with Grid) The CODE IS LIKE THIS
class Cell creates Buttons and I use this class to create N*N grid Button , but my frame color will affected if I use Grid

for x in range(s.GRID_SIZE):

for y in range(s.GRID_SIZE):

c = Cell(x,y)

c.create_btn_object(center_frame)

c.cell_btn_object.grid(

row=y, column=x

)

@xzex2609
14 days ago

what happened To CLEAR CODE ?? I really love your style of teaching ,are you have more channels ??

22
0
Would love your thoughts, please comment.x
()
x