Home▸Physics & Mechanics▸Film Animation: Keyframes and Tweening (2D)

🎞️ Film Animation: Keyframes and Tweening (2D)

Side-view 2D model of traditional keyframe animation: drag the keyframe gems of a bouncing ball, choose spline or linear paths and easing curves, step through drawings at 2-60 per second and watch squash-and-stretch, onion-skin ghosts and a live height and speed timeline.

Physics & Mechanics2DEasy60 FPS📱 Mobile-adapted⇄ 3D version

Details

CategoryPhysics & Mechanics

RenderingCanvas 2D

DifficultyEasy

Target FPS60

ControlsDrag keyframe gems on the canvas or retime them on the timeline; sliders for playback speed, total duration, drawings per second, squash and stretch and onion-skin count; selectors for linear or Catmull-Rom path and seven easing curves (including gravity parabola, bounce, elastic); presets, add and delete keyframes, step and loop.

animationkeyframestweeningeasingsquash and stretchCatmull-Rom

Related simulations

SPH FluidFluid simulation via SPH: pressure, viscosity, gravity and wall bouncing. Splash impulse…

Spring-Mass Cloth SimulationExplore the physics of cloth movement with this simulation! Adjust the spring stiffness and…

Car PhysicsRealistic driving with suspension, drift, nitro and particle effects. Navigate rough terrain. ⊞ All 3331 in Physics & Mechanics →

⚙ Under the hood

animationkeyframestweeningeasingsquash and stretchCatmull-Rom

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install