Once you’ve mastered basic motion in Jitter, level up with custom animations and power-user techniques to create polished, professional motion.
Custom animations
Custom animations are the foundational building blocks of Jitter's animation capabilities. They form the underlying layer behind most presets, and are often used in combinations to create unique effects.
Select the layer
Open Animate → New animation → Custom
Choose the animation type
Adjust parameters in the Property panel
💡 Tip: On non-text layer animation presets, you can right-click and select Convert to actions in the timeline to break it down into its custom animation set.
Custom animation types
General
These animation operations can be used on most layers that have relevant properties.
Effect | What It Does | How It Looks | When to Use |
Move | Shifts the layer position along X and Y axes | The layer slides, glides, or drifts from one place to another | To guide attention, create entrances/exits, or simulate motion like scrolling |
Scale | Increases or decreases the size of the layer | Layer appears to zoom in or out | To emphasise key content or create pop/bounce effects |
Rotate | Rotates the layer around its centre point | Layer spins or tilts during motion | To introduce playful motion |
Opacity | Animates an adjustment of how visible the layer is (0%–100%) | Layer fades in or out smoothly | For soft transitions or bringing elements in/out gently |
Color | Changes the layer from one color to another | Layer gradually shifts from one color to another | For highlights, mood shifts, and hover effects |
Shadow | Animates a drop shadow | Shadow appears, grows, softens, or disappears | To add depth, simulate lifting, or enhance hover states |
Layer Blur | Animates the application or removal of a blur effect | The layer comes into or out of focus | For cinematic reveals, dreamy effects, or transitions |
Background Blur | Blurs content behind the layer | Blurred shapes and color, top layer stays sharp | For modals, navbars, or any frosted UI elements |
Glass | Simulates the look of real glass using transparency, blur, and a subtle edge
| A reflective pane over the layer that looks like physical glass | For premium UI elements or iOS-style panels |
Hide / Show | Instantly toggles layer visibility at a point on the timeline (no fade or easing) | Layer appears or disappears completely | To manage visibility across complex sequences |
Resize | Animates width and/or height changes | Layer stretches or expands during animation | To reveal hidden content, emphasise interaction, or animate layout shifts |
Corner Radius | Animates rounding of layer corners | Corners transition between sharp and rounded edges | To soften UI elements or transition between visual styles |
Stroke | Animates outline weight and color | Borders thicken/thin or shift color over time | For highlight states, emphasis, or soft outline reveals |
Text layers
Use text-specific animations to play with the written word and make your message stand out.
Effect | What It Does | How It Looks | When to Use |
Change Text | Swaps the layer’s string from one value to another, with optional In/Out text effects | Text exits (fade, slide, etc.), then new copy enters. Both can overlap if simultaneous. | Titles, UI copy swaps, multi-step messaging |
Letter Spacing | Animates spacing between characters | Letters spread apart or tighten over time | Emphasis, logo locks, kinetic type |
Line Height | Animates vertical spacing between lines | Text block expands or compresses vertically | Layout reveals, stacked headlines, breathing room |
Counts a number by specified steps, with optional In/Out effects per step | Digits tick up/down (works with | Countdowns, stats, metrics, prices, dashboards |
Shape layers
Use shape-specific animations to transform geometry on rectangles, ellipses, stars, and custom shapes.
Effect | What It Does | How It Looks | When to Use |
Animates a shape from one form to another | One shape fluidly transforms into another | Logo transforms, organic shape transitions | |
Arc | Animates ellipse arc properties (sweep/angles) | A circle or oval opens, closes, or traces as an arc | Progress rings, pie reveals, circular UI |
Star | Animates star geometry (points, ratios, etc.) | A star changes pointiness, count, or proportions | Decorative motion, badge/icon accents |
Easing
Use easing to make animations feel natural and life-like. Easing makes elements accelerate and slow down throughout their motion, instead of being one constant speed.
Reusing animations
Speed up repetitive workflows by reusing animations.
Select the animation in the timeline
Press ⌘ C / Ctrl C to copy
Select the target layer
Press ⌘ V / Ctrl V to paste
This enables you to maintain consistent motion across multiple layers and quickly build systems instead of one-off animations.