ember-foxy-springs

This addon provides an ember component wrapper around Facebook's rebound-js, that's it!

This is not a fully featured animation library, it's just springs to give your components a bit more of a fun lifelike feel to them.

Typically it requires you to pipe spring values directly into css transforms. The advantage of this is the animations are very performant.

Is it easy to use?

Sort of. At the very least it's declarative, but requires some thinking when you're trying to do some things that might be more trivial with a standard animation library or css transforms. But the results are really nice.

But doesn't this break separation of concerns?

I guess, but you'll have to just balance that against how much you want some sweet programmable bounce in your life.

Why Springs?

It turns out, that almost nothing in the real world behaves like a cubic bezier function, most mechanical systems involve all sorts of springs, and so can be modeled as a damped harmonic oscillator. Thankfully facebook has done all the hard work simulating the spring, all you need to do is map the values to css attributes and you're off.

Compatibility

• Ember.js v3.12 or above
• Ember CLI v2.13 or above
• Node.js v10 or above

Installation

ember install ember-foxy-springs

Usage

import Controller from '@ember/controller';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';

export default class ApplicationController extends Controller {

  @tracked
  to = 1;

  @action
  nextValue(){
    this.to = Math.round(Math.random() * 10);
  }

}

<button {{on 'click' this.nextValue}} class='a-button'>Click me to Sprong this Spring</button>

@to={{this.to}}

<Spring @to={{this.to}} @onSpringAtRest={{this.handleSpringAtRest}} as |value|>
  Springy Value: {{value}} 
</Spring>

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.