A gallery of examples demonstrating the types of animations you can build
with rebound-js.
Cascade Effect
This example demonstrates a cascade effect generated from a single spring curve.
A spring is pre-recorded using the SimulationLooper. Each frame of the spring is
played back over a set of frame handlers where each handler trails the next by one
frame. When all of the handlers have played all the frames, the animation is over.
(Code)
Hamburger Button Example
This example demonstrates an animation similar to the one found in Facebook
Paper for transitioning a hamburger button into a close button. The animation
timing is run on a Rebound spring and each frame of the animation is interpolated
from a zero to one spring transition and drawn in canvas. Tap/Click on buttons
to transition between the states. (Code)
Photo Scale Animation
This example demonstrates scaling a photo on a Rebound spring animation. You can adjust the
tension and friction using the sliders and observe how this changes the curve of the spring
animation. The tension and friction values are based on
Origami, so you can convert Origami mockups
directly into Rebound animations. (Code)