What Animation Effects Can I Create with Trangram?

Trangram is a browser-based vector editor that runs without installation, login, or sign-up, and its animation toolset covers shape transitions, self-drawing lines, guided motion, repetition, timing, and number or group animation. You can produce these effects directly in the editor: morph one shape into another, reveal or erase a line with trim paths, move objects along a motion path, repeat animations with Cycle, Ping Pong, or Continue, adjust motion with easing functions, and animate numbers or grouped objects. The sections below describe what each effect does and when to reach for it.

Shape and path effects

Morph shapes

Morphing smoothly transitions one shape into another — for example, a square into a circle or a star into a heart. Use it when you want a single object to change identity over time rather than swapping two separate objects on and off screen.

Trim path

A trim path creates self-drawing animations by gradually erasing or revealing parts of a line, so the line appears or disappears smoothly. This is the effect to use for handwriting-style reveals, progress lines, or any stroke that should draw itself.

Motion path

A motion path acts like a guiding track for an object, moving it smoothly from one place to another along a specific route — much like a car following a road. Choose it when an object needs to travel a curved or non-linear route instead of a straight interpolation between two positions.

Repetition and timing

Looping

Looping controls how an animation repeats, with three modes:

Pick Cycle for a clean restart, Ping Pong for oscillating motion, and Continue when the animation should carry forward rather than reset.

Easing

Easing functions control how animations move — smoothing motion, speeding it up quickly, or slowing it down gently. Available options include Ease In, Ease Out, Ease In Out, and Step Functions. Use Step Functions when you want discrete, non-interpolated changes rather than gradual movement.

Object-level animation

Number animation

Numbers animate as simply as creating text: specify start and end numbers plus formats such as commas, decimals, or leading zeros. This suits counters, statistics, and any numeric readout that should count up or down.

Group animation

Groups organize objects so they animate together, and nested groups are especially handy for animating various transformations. Use groups when several objects should share a single transform instead of being keyframed individually.

Parent link

Parent links coordinate objects: any movement or transform applied to the parent causes child objects to follow or respond in a coordinated way. This is useful for rig-like setups where one control should drive several attached elements.

Related shape tools

Two non-animation features often pair with the effects above. Round corners rounds any shape's corners with Round, Inverted Round, or Chamfer styles, and Boolean Operations combine shapes by uniting, subtracting, intersecting, and excluding. A clipping mask works like a stencil, revealing only a specific part of an image or object while hiding the rest.

Choosing the right effect

• Object changes form over time → Morph shapes
• Line should draw or erase itself → Trim path
• Object follows a route → Motion path
• Animation must repeat → Looping (Cycle, Ping Pong, or Continue)
• Motion feels mechanical → Easing
• Numeric value should count → Number animation
• Multiple objects move as one → Group animation or Parent link

Note that Trangram's page lists a scheduled maintenance window on May 1, 2026, from 2:00 PM to 6:00 PM (AEST), so plan work around that period.