Skip to content
Generates keyframe animations using Rebound.js by Facebook - a spring system simulator. Similar to Animate.css
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


SASS/CSS3 Keyframe animation generator built on Facebook's Rebound.js. Similar to Animate.css


See here for a list of the 'out of the box' animations.

How to use

Easy instructions

  1. Download this package.
  2. SCSS files are available in the dist/ folder. You can import the _animations.scss file to include all the animations.
  3. Simply put the corresponding class on the element you want to animate. For Example: bounceInRight. Note that for the flipping animations you may need perspective: XXXXpx; on the container element for the full effect.

It's recommended that you comment out animations you aren't using from _animations.scss to save on file size. If you just want to use a pre-built css file, you can find it here (47kb.)

How to customize and build your own animations

  1. Clone this repo git clone .
  2. Install Grunt if you haven't.
  3. Edit the data/data.json (see below for more details)
  4. Run grunt build
  5. Built animations will go into dist/
  6. Or, you can run grunt watch to build whenever you make a change.

This will build individual animations, compiled .css files and automatically add any new animations to the example page so you can see them immediately. This can be a big help for quickly developing new animations.

Alertnately, you can compile from code.

Install the module with: npm install reboundgen

var reboundgen = require('../lib/reboundgen.js');


This could easily be turned into a grunt or gulp plugin...

Data format

	"outputFolder": "dist/",
			"steps": 50,
			"name": "bounceInRight",
			"tension": 50,
			"friction": 5,
			"fadeIn": 150,
			"hardBounce": true,
			"bounceDamp": 0.4,
			"properties": {
				"translateX": { 
					"friction": 3,
					"start": 500, 
					"end": 0 
				"translateY": 500


Type: Number Default value: 50

The number of keyframes to generate. In most cases you can leave this at 50, since reboundgen will remove unnecessary keyframes. However you can experiment with using lower values like 25 to save on file size.


Type: String

The name of the animation and resulting .scss file. Be sure to avoid illegal characters.


Type: Number Default value: 30

Tension of the spring. How quickly it snaps back.


Type: Number Default value: 5

Friction force. Slows the spring motion.


Type: Number Default value: 0

Time in milliseconds to fade in opacity.


Type: Number Default value: 0

Time in milliseconds to fade out opacity.


Type: Boolean Default value: false

Instead of allowing the spring to freely oscillate, bounces the spring as if hitting a wall, when passing the target value.


Type: Number Default value: 0

Factor of velocity lost when bouncing, in the range of 0...0.99


Type: Object

List of properties to animate. Currently we're suppporting:

  • translateX
  • translateY
  • translateZ
  • scaleX
  • scaleY
  • scaleZ
  • rotate
  • rotateX
  • rotateY
  • rotateZ
  • skewX
  • skewY


Type: Number Default value: 0.5

The transform-origin x parameter in the range of 0...1.0


Type: Number Default value: 0.5

The transform-origin y parameter in the range of 0...1.0

If you specify an object for the property, you can set the start and end. Additionally, any of the above parameters (friction, tension, etc.) can be overriden per property. If you don't specify an object and simply specify a number instead, then it is assumed that you are transitioning from 0 to the number with the default settings.

Known Issues

I've noticed that Safari seems to break when using scale 0.0 as the initial scale when combined with rotation. Using 0.1 works. Also, the 'rubberband' animation seems to cause some rendering issues in Chrome sometimes.


Copyright (c) 2014 Dave Wallin
Licensed under the BSD license.

You can’t perform that action at this time.