ember-foxy-springs
v0.0.2
Published
A springy addon to make your apps feel more springy.
Downloads
2
Readme
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.