VectorHopTween Lab (GSAP)
← Back to productWorksheet BuilderCurriculum ExplorerMapEzra's Homework (Lesson 1)Problem SetsEGSM DatasetBarbie Savings GraphVelocity Physics GraphCrab Distance GraphEquation Solver LabFactoring (Factor Tree)Hyper (Text Animation)Grid (Coordinate Plane)Grid (Rough.js)Crab Animation LabCrab Lab v2 (GSAP)Tween Lab (GSAP)Mouth Morph LabRough Crab LabTV Pencil Crab LabNotebook BackdropV3 Problem 4 (Fact Engine)V3 Visual Graph Authoring StudioScene Editor
Legacy archive (v1) — not part of the product← Back to product
AMorph variant
Happy → Angry
Loading…
Interpolation
Segment mapping
Smoothing
Shape index
Origin
Ease
BMorph variant
Happy → Angry
Loading…
Interpolation
Segment mapping
Smoothing
Shape index
Origin
Ease
CMorph variant
Happy → Angry
Loading…
Interpolation
Segment mapping
Smoothing
Shape index
Origin
Ease
Drag the scrubber to inspect the face at any point.
StartEnd
The runtime call
const crab = createSvgRigRuntime(svg, EZ_CRAB_V4_RIG, 'crab-lab')

crab.setAttachment('left_brow', 'left_brow.angry', {
  transitionMode: 'morph',
  transitionMs: 1200,
  morphOptions: {
    type: 'linear',
    map: 'size',
    origin: '50 50'
  },
})