Google Dots Mobile Animation using Python (Pygame)
If you have ever noticed the Google loading dots animation on mobile devices, you know how clean and smooth it looks. In this project, we recreate the Google-style bouncing dots animation using the Pygame library in Python. This tutorial is a fun way to explore animation logic, sine wave movement, and text fade-in effects in Python.
Why Build Google Dots Animation in Python?
Animations are a great way to practice creative coding. By using Pygame,
you can simulate smooth bouncing effects, color transitions, and even text fade-ins.
This project not only helps you understand how math.sin() can create natural bouncing motions,
but also teaches you how to handle timing, opacity, and frame-based animations in Python.
Features of This Project
- Bouncing Dots: Four colored dots representing Blue, Red, Yellow, and Green.
- Wave Effect: Each dot moves up and down with a slight delay, creating a wave-like motion.
- Text Fade-In: After a short delay, the word “Google” fades in smoothly below the dots.
- Mobile Screen Resolution: The animation runs on a
360×640window, similar to smartphone screens.
Step-by-Step Code Explanation
1. Setting Up the Screen
The Pygame window is initialized with size 360×640. This matches a common
mobile screen resolution, giving a realistic look to the animation.
2. Defining Google Colors
The dots are colored using the official Google brand palette:
blue (#4285F4), red (#EA4335), yellow (#FBBC05), and green (#34A853).
3. Creating the Bouncing Effect
Each dot is assigned an angle and updated frame by frame with math.sin().
This gives a smooth up-and-down bouncing effect, with staggered timings to mimic Google’s animation.
4. Text Fade-In
After a short delay, the text "Google" is displayed using a gradual opacity increase. This creates a soft fade-in effect, enhancing the visual appeal.
🌐 Google Mobile Animation
import pygame
import sys
import math
def google_dots_mobile():
# Mobile screen size
width, height = 360, 640
pygame.init()
screen = pygame.display.set_mode((width, height))
pygame.display.set_caption("Google Mobile Animation")
clock = pygame.time.Clock()
# Google colors (Blue, Red, Yellow, Green)
COLORS = [(66, 133, 244), (234, 67, 53), (251, 188, 5), (52, 168, 83)]
# Dot positions and properties
dot_radius = 14
spacing = 30
base_x = width // 2 - (spacing * 1.5)
y_center = height // 2
positions = [(base_x + i * spacing, y_center) for i in range(4)]
angles = [0.0, 0.3, 0.6, 0.9] # Staggered for wave effect
# Animation control
frame = 0
show_text = False
text_opacity = 0
running = True
while running:
screen.fill((255, 255, 255))
for event in pygame.event.get():
if event.type == pygame.QUIT:
running = False
# Animate bouncing dots
for i in range(4):
y_offset = math.sin(angles[i]) * 10
x, y = positions[i]
pygame.draw.circle(screen, COLORS[i], (int(x), int(y + y_offset)), dot_radius)
angles[i] += 0.12
if frame > 60:
show_text = True
if show_text:
if text_opacity < 255:
text_opacity += 5
font = pygame.font.SysFont('Product Sans', 36, bold=False)
text_surface = font.render("Google", True, (100, 100, 100))
text_surface.set_alpha(text_opacity)
text_rect = text_surface.get_rect(center=(width // 2, y_center + 70))
screen.blit(text_surface, text_rect)
pygame.display.flip()
clock.tick(60)
frame += 1
if frame > 180:
running = False
pygame.quit()
sys.exit()
google_dots_mobile()
🔍 Output Preview
Applications of This Project
- Recreate popular loading animations in Python.
- Practice frame-based animation techniques with Pygame.
- Understand opacity and sine wave motion for smooth UI effects.
- Add a fun creative coding project to your Python portfolio.
Final Thoughts
This project shows how you can use Python and Pygame to create a Google-style mobile loading animation. With just a few lines of code, we achieved bouncing dots, wave motion, and text fade-in effects. If you’re learning Python and want to practice graphics programming, this animation is a perfect way to sharpen your skills.
