Using Manim For Making UI Animations — Smashing Magazine

Animating Concepts: Manim’s Role in Visual Communication

Animation is a powerful medium for explaining ideas, especially when text alone leaves gaps in understanding. Consider a common programming concept: a variable stores a value. For a beginner, terms like “stores” and “assigns” feel abstract. But if you see a box labeled X that starts empty, fills with the number 5, and then updates to 12, 8, and so on, the idea becomes tangible. Animations give you that visual, dynamic representation of how things work under the hood.

This is where Manim excels. Manim is an open-source Python library for creating high-quality mathematical animations. Originally developed by Grant Sanderson for his 3Blue1Brown YouTube channel, it has since become a popular tool for educators, researchers, and developers. Manim is also a script-driven animation engine. Unlike traditional video editors where you drag and drop elements, you generate everything by writing Python code. This approach gives you precise control over text, colors, shapes, transformations, and timing.

Manim is widely known for visualizing math and science. A concept like a sine wave, often described as a smooth, continuous curve that repeats, becomes far more intuitive when presented as a moving animation.

The value of animation extends to design and front-end development as well. Static mockups don’t always convey user flows or micro-interactions clearly. By scripting animations, you can demonstrate what a webpage or app will do—like a button press or a page transition—making it easier for stakeholders to grasp the intended UX structure.

Cost And Complexity Comparison With Other Tools

If Manim doesn’t perfectly suit your project or programming environment, several alternatives can achieve similar results. Each of these tools offers a scripting approach to visuals.

• Processing
  A Java-based coding framework ideal for generative art and interactive visuals.
• p5.js
  A JavaScript library that makes it easy to create browser-based graphics using HTML and CSS interactions.
• Desmos
  Focused on math visualization, with interactive graphing through its calculator and API interfaces.
• Blender (with Python Scripting)
  Typically known for 3D rendering, but its Python API allows for scripted animations and physical simulations.

Setting Up: A Zero-Installation Path

You have several options to install Manim, including local setup, Conda, Docker, or Jupyter Notebooks. For a low-friction start, you can use Replit, an online editor that lets you skip installations entirely.

To begin on Replit:

1. Create an account using your GitHub or email address. The dashboard loads after you are signed in.

2. Click “Create App”. You will see three options: “Create With Replit Agent”, “Choose a Template”, or “Import from GitHub”.

3. Select “Choose a Template”. Search for Manim to find a pre-configured template. Once created, it sets up main.py, a media folder, and all required dependencies.

From there, your environment is ready. You can begin writing animation scripts immediately.

Applying Manim Across Math, Code, And UI

Manim’s usefulness extends from abstract geometric proofs to practical user flows. Let’s review how different fields benefit from its animation logic.

Dynamic Math And Geometry Ideas

Seeing a graph update as a parameter changes can fundamentally shift how a learner understands a function. For instance, exploring derivatives or transformations often clicks when you can watch the shape morph over time rather than infer it from a static plot.

The same holds for geometry. Concepts like rotation and reflection become clearer when you witness the visual transformation step-by-step. Even constructing geometry with tools like a compass and straightedge can be scripted and shown sequentially.

Clarifying Code Processes And Logic

Coding is inherently sequential, though abstract. Visualizing how a loop executes or how a sorting algorithm reorders an array exposes the logic flow. Data structures such as linked lists or binary trees become easier to understand when you can see them grow and balance their branches.

Advanced logic like Dijkstra’s shortest path algorithm is easier to grasp if you watch the path computation occur in real time, even for audiences without hard math backgrounds.

Animated UX Scenarios And Motion Design

While Manim lacks design-editing features, it is not short of storytelling power. You can create “before-and-after” animatics that contrast interface layouts, showing why an improved navigation menu feels more intuitive.

One can also illustrate analytical findings. Animated heatmaps and conversion funnels can reveal where users click most or pinpoint the exact step where they decide to leave a flow.

Core Building Blocks For Your Scripts

Every Manim project revolves around three foundational elements: Mobjects, Animations, and Scenes. Before coding, it helps to understand how these interact to produce your final output.

Mobjects As Displayable Elements

All displayed items are Mobjects, short for Mathematical Objects. Some common types include:

• Basic shapes like Circle(), Rectangle(), and Arrow().
• Text elements to add labels to your visuals.
• Higher-level structures like axes and graph plots.

These objects are blueprints. They don’t appear on screen until added to a scene. The snippet below exemplifies that principle:

from manim import *

class MobjectExample(Scene):
  def construct(self):
    circle = Circle()  # Create a circle
    circle.set_fill(BLUE, opacity=0.5)  # Set color and transparency
    self.add(circle)  # Add to the scene
    self.wait(2)

Animations Reached Via Play()

Animations handle changes to a Mobject over time. You control each change explicitly using the Animation class. For example:

from manim import *

class AnimationExample(Scene):
  def construct(self):
    circle = Circle()
    circle.set_fill(BLUE, opacity=0.5) 

    self.play(FadeIn(circle))
    self.play(circle.animate.shift(RIGHT * 2))
    self.play(circle.animate.scale(1.5)) 
    self.play(Rotate(circle, angle=PI/4))  
    self.wait(2)

In the code above, FadeIn(circle) creates a smooth introduction, while circle.animate.shift(RIGHT * 2) moves the circle horizontally. The play() method triggers these actions. If you want to control speed, set the run_time parameter:

self.play(circle.animate.scale(2), run_time=3),

The run_time modifier extends how long an action executes, slowing down scale changes beyond the default timing.

Scenes Define the Choreography

A Scene class holds the display and logic flow. All scripts define a subclass with a construct() method. Within construct(), you structure your animation logic. Consider how text can appear letter by letter in a style reminiscent of writing:

class SimpleScene(Scene):
  def construct(self):
    text = Text("Hello, Manim!")
    self.play(Write(text))
    self.wait(2)

Concept Demonstrations For UI Front-End Work

Let’s apply these primitives toward interface experiences. We can script button navigation flows and scroll transitions to simulate realistic UX journeys.

Simulating A Page Transition

Consider a simple homepage environment. Your goal is to demonstrate what happens when a button press occurs. First, you can depict a button slightly fading when clicked. Following that, the original screen disappears and a new page fades into place:

from manim import *

class UIInteraction(Scene):
  def construct(self):
    # Create a homepage screen
    homepage = Rectangle(width=6, height=3, color=BLUE)
    homepage_label = Text("Home Page").scale(0.8)
    homepage_group = VGroup(homepage, homepage_label)

    # Create a button
    button = RoundedRectangle(width=1.5, height=0.6, color=RED).shift(DOWN * 1)
    button_label = Text("Click Me").scale(0.5).move_to(button)
    button_group = VGroup(button, button_label)

    # Add homepage and button
    self.add(homepage_group, button_group)

    # Simulating a button click
    self.play(button.animate.set_fill(RED, opacity=0.5))  # Button press effect
    self.wait(0.5)  # Pause to simulate user interaction

    # Create a new page (simulating navigation)
    new_page = Rectangle(width=6, height=3, color=GREEN)
    new_page_label = Text("New Page").scale(0.8)
    new_page_group = VGroup(new_page, new_page_label)

    # Animate transition to new page
    self.play(FadeOut(homepage_group, shift=UP),  # Move old page up
      FadeOut(button_group, shift=UP),  # Move button up
      FadeIn(new_page_group, shift=DOWN))  # Bring new page from top
    self.wait(2)

Showing Screen Scroll Interactions

Another standard modern interaction is the scroll. Content sections usually make subtle upward movements as users navigate a page. This can be shown by shifting the mobile scene vertically:

from manim import *

class ScrollEffect(Scene):
  def construct(self):
    # Create three sections to simulate a webpage
    section1 = Rectangle(width=6, height=3, color=BLUE).shift(UP*3)
    section2 = Rectangle(width=6, height=3, color=GREEN)
    section3 = Rectangle(width=6, height=3, color=RED).shift(DOWN*3)

    # Add text to each section
    text1 = Text("Welcome", font_size=32).move_to(section1)
    text2 = Text("About Us", font_size=32).move_to(section2)
    text3 = Text("Contact", font_size=32).move_to(section3)

    self.add(section1, section2, section3, text1, text2, text3)
    self.wait(1)

    # Simulate scrolling down
    self.play(
      section1.animate.shift(DOWN*6),
      section2.animate.shift(DOWN*6),
      section3.animate.shift(DOWN*6),
      text1.animate.shift(DOWN*6),
      text2.animate.shift(DOWN*6),
      text3.animate.shift(DOWN*6),
      run_time=3
    )
    self.wait(1)

Expanding Beyond Screen Shots

Manim enables motion design thinking where static screenshots fall short. While traditionally used in math-heavy settings, these animation tools can certainly highlight front-end transitions. By scripting how users interact with geometry, interfaces for navigation tend to become clearer, not just spoken about, but experienced.

The barrier to entry doesn’t have to be high. Between installation methods and practical programming patterns, adopting Manim simply requires a little time and exploration. Avoid treating it as a black box; it responds well to experimentation. More importantly, building a habit remains vital. Visualization of subtle movements and state shifts can be both crucial and achievable.