Command Palette

Search for a command to run...

Hectal
Phase 1: How Motion Works
Web Animation · Exercise 1 of 4Next
Beginner

Fix the lerp

The slider should move the box from 40 px (slider at 0) to 240 px (slider at 100). At the middle it should be at 140 px, but it is not.

Fix the lerp function: it should be a + (b - a) * p.

What Check tests

  1. At the start (slider 0) the box is at 40 px
  2. At the end (slider 100) the box is at 240 px
  3. In the middle (slider 50) it is at 140 px

Stuck? One hint at a time

The solution unlocks after your first Check. Try first: that is where the learning happens.

Runs in your browser. Your code is saved here.

Your page

Press Run to see the page.
00:00.000
animations
0.00s0.10s0.20s0.30s0.40s0.50s0.60s0.70s0.80s0.90s

Nothing is moving yet. Hover, click or scroll the page: every animation it starts shows up here as a track.

frames

Console

Nothing logged yet.