GPU stagger animation for elements in Ember applications
MIT License
GPU stagger animation for Ember list items
See the demo here.
ember install ember-stagger-swagger
ember-stagger-swagger
ships with a stagger-set
component that can be used directly in a template to wrap the items that you wish to animate.
Conceptually, the component treats all direct child elements as its set items or list items:
<h2>Spell Ingredients </h2>
{{#stagger-set inDirection="right" inEffect="slideAndFade"}}
{{#each potions as |potion|}}
<li>{{potion.name}}</li>
{{/each}}
{{/stagger-set}}
Additionally, ember-stagger-swagger
exposes a mixin that can be imported directly from the addon and extended however you see fit:
import StaggerSetMixin from 'ember-stagger-swagger/mixins/stagger-set';
inDirection
'left'
, 'down'
, 'right'
, or 'up'
.outDirection
inDirection
.'left'
, 'down'
, 'right'
, or 'up'
.inEffect
'slideAndFade'
, 'slide'
, 'fade'
, or 'scale'
(see the demo for a preview of each).outEffect
inEffect
'slideAndFade'
, 'slide'
, 'fade'
, or 'scale'
(see the demo for a preview of each).customInEffect
inEffect
, this name will take precedence. This can be used to create your own effects and integrate them with stagger-swagger
's built-in functionality.null
customOutEffect
outEffect
, this name will take precedence. This can be used to create your own effects and integrate them with stagger-swagger
's built-in functionality.null
showItems
true
to correspond with enterOnRender
's default.true
or false
enterOnRender
enterOnRender
allows for ashowItems
. Without enterOnRender
, initializing the component with showItems
set to true
will cause the items to render in their normal visible state, from which the animation can be toggled further. Setting enterOnRender
to true -- in conjunction with setting showItems
to true (both of which are the default) -- creates a stagger-in animation on render and then hinges on the state of showItems
going forward.true
true
or false
staggerInterval
inDelay
outDelay
inTimingFunc
cubic-bezier(0.215, 0.610, 0.355, 1.000)
(AKA "ease-out-cubic")timing-function
value. If this value is invalid, the browser will default to using ease
.outTimingFunc
cubic-bezier(0.55, 0.055, 0.675, 0.19)
(AKA "ease-in-cubic")timing-function
value. If this value is invalid, the browser will default to using ease
.inDuration
outDuration
duration
inDuration
or outDuration
, this property will take precedenceBecause the DOM elements of Ember components are, by default, <div>
s, and because it handles setting an animationName
property on the component's direct children, you can safely design, conceptualize, and style your child elements as you normally would for the list items of a relative container.
Furthermore, because the keyframes for the built-in effects of slide
and slideAndFade
define transforms to bring their element in or out of its container's visible bounds (e.g., transform: translate3d(-100, 0, 0)
at the 100%-stop of a left slide), it may well be useful to restrict overflow on the top-level component's element so that the children disappear when they're outside of said bounds.
The stagger-set "list items" demo is an example of how this would appear.
By default, a stagger-list
component will attempt to map the keywords provided for inEffect
or outEffect
to one of its built-in keyframes.
However, you're free to implement your own keyframes and have them called instead. Just define them in your stylesheets as you would normally, and then pass the keyframe name to a stagger-list
as a string argument for either customInEffect
or customOutEffect
. When these attributes are defined, stagger-list
will always set them on the animation-name
property of its child elements' style definition at the appropriate time.
onAnimationStart
: called immediately after the first item in the set triggers its animationstart
event.
animationEvent
: the animationevent
object
onAnimationComplete
: called immediately after the last item in the set triggers its animationend
event.
animationEvent
: the animationevent
object
Together, these hooks can provide more control over interactions with the component during its animation. For example, if you set up a button to trigger toggles of the animation, you might want to make sure that it's disabled between the start and completion events.
<h2>Spell Ingredients </h2>
{{#stagger-set
inDirection="right"
inEffect="slideAndFade"
onAnimationStart=(action 'loadCannons')
onAnimationComplete=(action 'fireCannons')
}}
{{#each potions as |potion|}}
<li>{{potion.name}}</li>
{{/each}}
{{/stagger-set}}
slide
animation?
liquid-fire-velocity
), but they're a bit too heavy for this addon, which only seeks to provide a handful of base effects and mainly concerns itself with encapsulating functionality.git clone
this repositorynpm install
bower install
ember server
npm test
(Runs ember try:testall
to test your addon against multiple Ember versions)ember test
ember test --server
ember build
For more information on using ember-cli, visit http://www.ember-cli.com/.