Motion Tween: Animate Smarter, Not Harder

What if you only had to define two poses — the start and the end — and the computer drew everything in between? That’s exactly what Motion Tween does. It’s the single feature that separates casual doodling from real animation production.

In Brinimate, Motion Tween works on geometric shapes, text, and freehand brush strokes — making it one of the most flexible interpolation engines available in a browser-based editor.

🧠 How Tween Works (The Core Idea)

You place Keyframe A (Pose 1) on Frame 1.
You place Keyframe B (Pose 2) on Frame 20.
You tell Brinimate: “Connect these two with a tween.”
Brinimate automatically calculates all 18 frames in between, smoothly transitioning between the two states.

What Brinimate can interpolate:

Position (X, Y) — objects slide across the screen.
Size (Scale) — objects grow or shrink smoothly.
Rotation — objects spin.
Stroke width — brush strokes can thicken or thin.

🎬 Step-by-Step: Your First Motion Tween

Example: A ball flying across the screen.

Draw a circle on the left side of the canvas at Frame 1. Press F6 to set the keyframe.
Go to Frame 20 on the timeline (click the frame number).
Press F6 again to insert a second keyframe.
With Frame 20 still selected, move your circle to the right side of the screen (and optionally make it smaller to simulate perspective).
Click any frame between 1 and 20 (e.g., Frame 10) in the timeline.
Right-click on the frame → select Create Motion Tween → choose your easing type (start with Linear).
Press Play. The ball flies smoothly from left to right.

📈 Easing Types Explained

Easing defines how an object accelerates and decelerates during its tween. The same distance with different easing feels completely different.

Easing	Feel	Best For
Linear	Constant, robotic speed	Mechanical objects, conveyors, clocks
Bounce	Hits end point then bounces	Balls landing, UI drop-ins, playful characters
Elastic	Overshoots then snaps back	Springs, rubber bands, cartoon exaggerations

Using easing correctly is what makes animation feel alive vs. flat and digital.

Example — Bouncing Ball with Squash & Stretch:

Frame 1: Circle at the top, normal round shape.
Frame 12: Circle at the bottom — squash it flat using the scale handles (wider, shorter).
Frame 20: Circle back at the top, round again.
Apply a Bounce tween to the first section (frames 1–12) for the fall.
Apply a Linear or Elastic tween from 12 to 20 for the rebound.
Result: A physically believable and cartoonishly expressive bounce.

✏️ Tweening Brush Strokes

This is a unique feature of Brinimate. Freehand strokes drawn with the Brush tool can be tweened like any other object:

Draw a wave shape with the Brush on Frame 1 (F6).
Go to Frame 30 (F6).
Move the stroke to a new position or adjust its size.
Apply a Motion Tween.
The stroke glides between the two positions.

This enables effects like:

A painterly stroke “wiping” across screen as a transition.
A ribbon of fire moving through a scene.
A handwriting effect combined with tween position.

🔁 Looping Tweens

To create a seamless loop (like a floating cloud or a pulsing glow):

Create your start pose at Frame 1.
At Frame 30, copy the exact same pose from Frame 1 (same position, size, rotation).
Apply a tween between 1 and 30.
Set the timeline loop range from 1 to 29 (not 30, to avoid one duplicate frame).
Press Play — a perfect infinite loop.

💡 Pro Tip — The 12 Principles of Animation + Tween: Professional animators follow Disney’s 12 principles. Tween handles the “Slow In and Slow Out” principle automatically with easing curves. But YOU control “Squash and Stretch” by manually adjusting the shape slightly at the impact keyframe. Combine both for animation that feels genuinely alive.

Now that motion flows, learn to reuse complex objects across scenes using Symbols and Instances — the key to efficient character animation.