Shape Tween: Morph Anything Into Anything

What if a square could melt into a circle? What if a star could dissolve into a blob? That’s exactly what Shape Tween does — and it’s now available in Brinimate.

Unlike Motion Tween (which moves, scales, and rotates objects), Shape Tween changes the actual geometry of your shapes, creating smooth morphing transitions between completely different forms.

🆕 What’s New

Shape Tween brings morphing to Brinimate with these capabilities:

Cross-type morphing — A rectangle can morph into an ellipse. A line can morph into a freeform path. Any geometric shape can transform into any other.
Smooth color interpolation — Stroke and fill colors blend gradually through the full RGB spectrum. No more abrupt color snaps.
Full easing support — Linear, Ease-In, Ease-Out, Bounce, Elastic — all work with shape morphing.
Works with existing shapes — Rectangles, ellipses, lines, and paths all participate.

🎬 How to Use Shape Tween

Example: A rectangle morphing into an ellipse.

Draw a rectangle on the canvas at Frame 1. Press F6 to set the keyframe.
Go to Frame 20. Press F6 to create a second keyframe.
On Frame 20, delete the rectangle and draw an ellipse in its place.
Go back to any frame between 1 and 20.
Right-click on the tween bar in the timeline → select Shape Tween (Morph) 🔮.
Press Play — watch the rectangle smoothly melt into the ellipse.

🔮 Motion Tween vs Shape Tween

	Motion Tween	Shape Tween
What it interpolates	Position, rotation, scale	Actual shape geometry + color
Object type changes?	No — same object moves	Yes — shape morphs into different form
Color interpolation	No	Yes — smooth RGB blend
Best for	Moving objects, spinning, growing	Morphing effects, liquid transitions, logo animations

You can combine both: use Motion Tween to fly an object across the screen, then switch to Shape Tween at a key moment to transform it.

🎨 Color Interpolation

One of the most visually striking aspects of Shape Tween is automatic color blending:

Stroke color interpolates smoothly between keyframes.
Fill color (for rectangles and ellipses) also blends.
Colors travel through the full RGB space — a red-to-blue tween passes through purple.

Try this: morph a red circle into a blue square. The shape changes AND the color shifts gradually through violet tones.

💡 Creative Ideas

Liquid text effect: Create text on Frame 1, convert to path (Ctrl+Shift+P), then morph to a blob shape on Frame 30 with Ease-In-Out easing.

Logo animation: Start with your logo’s final shape, then reverse-morph from a simple geometric form.

Character morphing: Morph a character’s body from standing pose to jumping pose using shape tween between two keyframes.

Loading animation: A circle morphing into a square morphing into a triangle in a seamless loop.

⚙️ Technical Details

Under the hood, Shape Tween:

Converts all shapes to normalized 16-point paths using Paper.js.
Resamples points uniformly by arc length for smooth transitions.
Interpolates each point pair independently with the selected easing curve.
Blends colors per RGB channel using linear interpolation.
Renders the result as a path element on the Konva canvas.

This means the morphing is computed in real-time at 60fps — no pre-rendering, no frame baking.

🚧 Current Limitations

This is the MVP (Minimum Viable Product) of Shape Tween. Here’s what’s coming next:

Shape Hints — manually map specific points between shapes for precise control (like Adobe Animate).
Bezier resampling — smoother curves for complex shapes.
Text morphing — convert text to outlines and morph between words.
Timeline visual indicator — distinct bar color for shape vs motion tweens.

💡 Pro Tip — Combining Tweens for Maximum Impact: Use Shape Tween for the transformation moment (e.g., rectangle becoming circle), then switch back to Motion Tween for the movement (circle flying off screen). This hybrid approach gives you the best of both worlds: fluid morphing + smooth motion.

Shape Tween opens up a new dimension of animation possibilities. Try it today and see what shapes you can make dance.

Next up: Learn about Bone Rigging to bring characters to life with skeletal animation.