Motion
Use movement to guide attention and explain change. Keep the logo's silhouette intact and leave time to read.
One clear idea
Make the change clear
Arrive with a gentle fade or short translation. Hold long enough to read. Resolve cleanly; avoid decorative loops. The demonstration is a web example, not a new production timing token.
Still state · reduced-motion equivalent
In practice
Move the complete mark as one object. Finish with a still, readable signature.
Ideas become useful when they connect.
Turn one clear idea into a learning path. Give the next step room to become useful.
The layout reveals useful detail. The button exposes its expanded state, and reduced motion receives the same content instantly.
Completed, with or without motion
Next: shape the lesson
Confirm the action with a check and a readable result. Keep the transition brief.
01—12 / Figma
Animation principles
Twelve motion principles adapted to the connected-droplet mark. Replay a study or move the timeline to inspect its timing.
Download native source dataThese demonstrations reuse the earlier timing studies with the current complete mark. Translation and opacity remain; old contour traces and independent axis scaling are retired. Their longer timelines are not UI duration tokens.
Squash & stretch
Open Figma studyA short travel and return keeps the complete mark intact. The former independent-axis stretch is retired.
Where to use it Use the travel as a decorative accent. Keep the mark's proportions unchanged.
The current mark moves as one unit. Independent axis scaling and the former contour traces are not used.
Read all study notes
Squash & stretch
A short travel and return keeps the complete mark intact. The former independent-axis stretch is retired.
Where to use it Use the travel as a decorative accent. Keep the mark's proportions unchanged.
Open Figma studyAnticipation
A short pull back precedes the forward movement. The whole mark settles into its final position.
Where to use it Use before a deliberate reveal or a user-triggered transition.
Open Figma studyStaging
The complete mark fades into view, leaving the surrounding content clear.
Where to use it Use when an introduction needs a clear visual hierarchy.
Open Figma studyStraight ahead / pose to pose
The complete mark appears through a timed reveal. Its silhouette stays unchanged throughout.
Where to use it Use a timed reveal when the signature needs a deliberate entrance.
Open Figma studyFollow through & overlap
The complete mark travels a short distance, passes its resting position and settles.
Where to use it Use for related elements that should arrive as one group without moving in lockstep.
Open Figma studySlow in & slow out
The whole mark appears gradually, with a still end frame for recognition.
Where to use it Use for a calm entrance and a readable landing.
Open Figma studyArcs
The complete mark follows a curved route and returns to its resting position.
Where to use it Use for a short, contained transition across a brand canvas.
Open Figma studySecondary action
One small follow-up movement gives the complete mark a final accent.
Where to use it Use one small accent after the main action. Keep attention on the primary form.
Open Figma studyTiming
A pause and a short reveal set the pace before the complete mark holds still.
Where to use it Use timing to separate the reveal from the reading pause.
Open Figma studyExaggeration
A longer approach and a restrained overshoot make the direction easy to see.
Where to use it Use in a large brand specimen. Reduce the travel distance in a compact interface.
Open Figma studySpatial assembly
The complete mark approaches its resting position through a measured translation.
Where to use it Use for a deliberate entrance. Keep the mark connected throughout.
Open Figma studyAppeal
A restrained reveal ends with a clear, still signature.
Where to use it Use when the logo needs time to be read after the reveal.
Open Figma study
01—08 / Figma
Composed motion
Eight sequences demonstrate different approaches, pauses and landings. Every sequence preserves the complete mark.
Download native source dataThese demonstrations reuse the earlier timing studies with the current complete mark. Translation and opacity remain; old contour traces and independent axis scaling are retired. Their longer timelines are not UI duration tokens.
Idea takes shape
Open Figma studyA small preparatory movement introduces the complete mark before it settles.
Where to use it Use for a brand introduction after an explicit play action.
Read all study notes
Idea takes shape
A small preparatory movement introduces the complete mark before it settles.
Where to use it Use for a brand introduction after an explicit play action.
Open Figma studyPrecision assembly
The complete mark approaches its final position, slows down and holds.
Where to use it Use a precise landing to align the mark with surrounding content.
Open Figma studyConfident signature
A quick preparation leads into a short travel and a controlled return.
Where to use it Use for a short signature moment without changing the logo's shape.
Open Figma studyQuiet resolution
The complete mark arrives softly and settles into stillness.
Where to use it Use when the brand should arrive without interrupting nearby content.
Open Figma studyMomentum relay
A small impulse moves the complete mark and returns it to its resting position.
Where to use it Use one brief movement to support a moment of exchange.
Open Figma studyHeld tension
The complete mark pauses, pulls back, releases and returns to its resting position.
Where to use it Use for one deliberate reveal. Avoid repeating the build-up around routine actions.
Open Figma studyMaterial memory
A small follow-up movement gives the complete mark a soft return.
Where to use it Use as a restrained accent while preserving the logo's shape.
Open Figma studyFocus lock
A measured reveal and a still hold give the complete mark time to be recognized.
Where to use it Use for a clear end frame with enough time to recognize the symbol.
Open Figma study
When movement earns its place
Demos play once when clearly in view and replay when you scroll back. They stop offscreen or when the tab is hidden. Pause and frame inspection stay under your control. Reduced motion keeps the artwork still.
Rules and source
Arrive, hold, leave
Arrive with a gentle fade or short translation. Hold long enough to read. Resolve cleanly; avoid decorative loops. The demonstration is a web example, not a new production timing token.
A still equivalent
Reduced motion keeps the same useful still state. Optional animation stops when the example leaves view or the browser tab is hidden.
Do
Animate the complete mark as one intact unit.
Don’t
Never morph, stretch or animate logo pieces independently.
Open editable Figma sourceSource pages 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58