Tessli

Guided research path

Motion starter pack

Goal

A balanced introduction to interface animation, interactive vectors, JavaScript motion, WebGL, and browser-based 3D workflows.

Audience

Designers and frontend engineers deciding how to add purposeful interface motion, vector animation, or browser 3D.

Expected decision

A motion approach matched to the interaction goal, runtime constraints, authoring workflow, and team stack.

Continue in Boards

Save sources here, then use Boards to record the choices you want to carry into your project.

Ordered research sequence

Inspect one stage at a time

Start with the first stage, inspect each source against its prompt, and save the references that help you make the decision.

Stage 1

Define the motion scope

Inspect
Compare general-purpose animation libraries with automatic transitions to separate essential interaction feedback from spectacle.
Decision supported
Choose whether the project needs timeline control, lightweight transitions, or both.
  1. Role — Why included
    Motion provides a production-oriented JavaScript and React baseline for interface animation.
    Inspect
    Compare general-purpose animation libraries with automatic transitions to separate essential interaction feedback from spectacle.
    Decision prompt
    Choose whether the project needs timeline control, lightweight transitions, or both.
  2. Role — Why included
    GSAP represents high-control timeline animation when sequencing and performance are central.
    Inspect
    Compare general-purpose animation libraries with automatic transitions to separate essential interaction feedback from spectacle.
    Decision prompt
    Choose whether the project needs timeline control, lightweight transitions, or both.
  3. Role — Why included
    LottieFiles supports asset-based vector animation workflows and handoff.
    Inspect
    Compare general-purpose animation libraries with automatic transitions to separate essential interaction feedback from spectacle.
    Decision prompt
    Choose whether the project needs timeline control, lightweight transitions, or both.

Stage 2

Choose the asset workflow

Inspect
Inspect vector and browser-based 3D authoring workflows, runtime ownership, and handoff needs.
Decision supported
Decide whether motion should be authored as interactive vectors, 3D scenes, or code.
  1. Role — Why included
    Rive adds stateful interactive vector animation rather than playback-only assets.
    Inspect
    Inspect vector and browser-based 3D authoring workflows, runtime ownership, and handoff needs.
    Decision prompt
    Decide whether motion should be authored as interactive vectors, 3D scenes, or code.
  2. Role — Why included
    Spline provides a collaborative browser 3D authoring route for teams avoiding low-level scene code.
    Inspect
    Inspect vector and browser-based 3D authoring workflows, runtime ownership, and handoff needs.
    Decision prompt
    Decide whether motion should be authored as interactive vectors, 3D scenes, or code.
  3. Role — Why included
    Three.js establishes the lower-level WebGL option and its engineering cost.
    Inspect
    Inspect vector and browser-based 3D authoring workflows, runtime ownership, and handoff needs.
    Decision prompt
    Decide whether motion should be authored as interactive vectors, 3D scenes, or code.

Stage 3

Match the implementation stack

Inspect
Compare low-level rendering, React integration, sequencing, and lightweight alternatives.
Decision supported
Select the implementation layer that fits the framework, performance budget, and maintenance capacity.
  1. Role — Why included
    React Three Fiber shows how Three.js integrates with React component architecture.
    Inspect
    Compare low-level rendering, React integration, sequencing, and lightweight alternatives.
    Decision prompt
    Select the implementation layer that fits the framework, performance budget, and maintenance capacity.
  2. Role — Why included
    Theatre.js supports authored sequencing and motion-design control for web scenes.
    Inspect
    Compare low-level rendering, React integration, sequencing, and lightweight alternatives.
    Decision prompt
    Select the implementation layer that fits the framework, performance budget, and maintenance capacity.
  3. Role — Why included
    Anime.js offers a smaller code-driven animation alternative for targeted interactions.
    Inspect
    Compare low-level rendering, React integration, sequencing, and lightweight alternatives.
    Decision prompt
    Select the implementation layer that fits the framework, performance budget, and maintenance capacity.
  4. Role — Why included
    AutoAnimate covers low-configuration layout transitions where a full motion system is unnecessary.
    Inspect
    Compare low-level rendering, React integration, sequencing, and lightweight alternatives.
    Decision prompt
    Select the implementation layer that fits the framework, performance budget, and maintenance capacity.