Web Component built with Stencil.js
to use Web Animations API in a declarative way.
<animatable-component
autoPlay
easing='ease-in-out'
duration={800}
delay={300}
animation='tada'
onFinish={() => alert('Eureka!')}
>
<h1>Hello World</h1>
</animatable-component>
To animate things you can use the createAnimatableComponent
utility:
import {
createAnimatableComponent
} from '@proyecto26/animatable-component'
const SendMessageButton = (props) =>(
<ion-fab-button {...props}>
<ion-icon name='send' />
</ion-fab-button>
)
const AnimatableSendMessageButton = createAnimatableComponent(SendMessageButton)
const keyFramesSendMessage: Keyframe[] = [
{
opacity: '0',
transform: 'rotate(0deg)'
},
{
opacity: '1',
transform: 'rotate(360deg)'
}
]
const optionsSendMessage: KeyframeAnimationOptions = {
duration: 500,
easing: 'ease-in-out'
}
...
render() {
return (
<AnimatableSendMessageButton
keyFrames={keyFramesSendMessage}
options={optionsSendMessage}
onFinish={() => alert('Eureka!')}
/>
)
}
...
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
animateId |
animate-id |
A DOMString with which to reference the animation. | string |
undefined |
animation |
animation |
Name of the animation to get the keyFrames | "bounce" | "bounceIn" | "bounceInDown" | "bounceInLeft" | "bounceInRight" | "bounceInUp" | "bounceOut" | "bounceOutDown" | "bounceOutLeft" | "bounceOutRight" | "bounceOutUp" | "flash" | "heartBeat" | "jello" | "pulse" | "rotate" | "rubberBand" | "shake" | "swing" | "tada" | "wobble" |
undefined |
autoPlay |
auto-play |
Start the animation when the component is mounted. | boolean |
true |
composite |
composite |
Determines how values are combined between this animation and other, separate animations that do not specify their own specific composite operation. Defaults to replace . |
"accumulate" | "add" | "replace" |
undefined |
currentTime |
current-time |
Sets the current time value of the animation in milliseconds, whether running or paused. | number |
undefined |
delay |
delay |
The number of milliseconds to delay the start of the animation. Defaults to 0. | number |
undefined |
direction |
direction |
Direction of the animation. | "alternate" | "alternate-reverse" | "normal" | "reverse" |
undefined |
duration |
duration |
The number of milliseconds each iteration of the animation takes to complete. Defaults to 0. | number |
undefined |
easing |
easing |
The rate of the animation's change over time. | custom function | "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" | "ease-in-cubic" | "ease-out-cubic" | "ease-in-out-cubic" | "ease-in-circ" | "ease-out-circ" | "ease-in-out-circ" | "ease-in-expo" | "ease-out-expo" | "ease-in-out-expo" | "ease-in-quad" | "ease-out-quad" | "ease-in-out-quad" | "ease-in-quart" | "ease-out-quart" | "ease-in-out-quart" | "ease-in-quint" | "ease-out-quint" | "ease-in-out-quint" | "ease-in-sine" | "ease-out-sine" | "ease-in-out-sine" | "ease-in-back" | "ease-out-back" | "ease-in-out-back" |
undefined |
endDelay |
end-delay |
The number of milliseconds to delay after the end of an animation. | number |
undefined |
fill |
fill |
Dictates whether the animation's effects should be reflected by the element(s) prior to playing ("backwards"), retained after the animation has completed playing ("forwards"), or both. Defaults to "none". | "auto" | "backwards" | "both" | "forwards" | "none" |
undefined |
iterationComposite |
iteration-composite |
Determines how values build from iteration to iteration in this animation. | "accumulate" | "replace" |
undefined |
iterationStart |
iteration-start |
Describes at what point in the iteration the animation should start. | number |
undefined |
iterations |
iterations |
The number of times the animation should repeat. Defaults to 1 , and can also take a value of Infinity to make it repeat for as long as the element exists. |
number |
undefined |
keyFrames |
-- | Keyframes of the animation. | Keyframe[] |
undefined |
keyFramesData |
key-frames-data |
Keyframes of the animation in string format. | string |
undefined |
options |
-- | Default options of the animation. | KeyframeAnimationOptions |
undefined |
optionsData |
options-data |
Default options of the animation in string format. | string |
undefined |
playbackRate |
playback-rate |
Sets the playback rate of the animation. | number |
undefined |
startTime |
start-time |
Sets the scheduled time when an animation's playback should begin. | number |
undefined |
Event | Description | Type |
---|---|---|
cancel |
This event is sent when the animation is cancelled. | CustomEvent<HTMLElement> |
finish |
This event is sent when the animation finishes playing. | CustomEvent<HTMLElement> |
Clears all KeyframeEffects
caused by this animation and aborts its playback.
Type: Promise<void>
Sets the current playback time to the end of the animation corresponding to the current playback direction.
Type: Promise<void>
Returns the current time value of the animation in milliseconds, whether running or paused.
Type: Promise<number>
Indicates whether the animation is currently waiting for an asynchronous operation such as initiating playback or pausing a running animation.
Type: Promise<boolean>
Returns an enumerated value describing the playback state of an animation.
Type: Promise<AnimationPlayState>
Returns the playback rate of the animation.
Type: Promise<number>
Returns the scheduled time when an animation's playback should begin.
Type: Promise<number>
Suspends playback of the animation.
Type: Promise<void>
Starts or resumes playing of an animation.
Type: Promise<void>
Reverses the playback direction, meaning the animation ends at its beginning.
Type: Promise<void>
- Put a script tag similar to this
<script src='https://unpkg.com/[email protected]/dist/animatable-component.js'></script>
in the head of your index.html - Then you can use the element anywhere in your template, JSX, html etc
- Run
npm install @proyecto26/animatable-component --save
- Put a script tag similar to this
<script src='node_modules/@proyecto26/animatable-component/dist/animatable-component.js'></script>
in the head of your index.html - Then you can use the element anywhere in your template, JSX, html etc
- Run
npm install @proyecto26/animatable-component --save
- Add an import to the npm packages
import @proyecto26/animatable-component;
- Then you can use the element anywhere in your template, JSX, html etc
I believe in Unicorns ๐ฆ Support me, if you do too.
To report a security vulnerability, please use the Tidelift security contact. Tidelift will coordinate the fix and disclosure.
Made with โค๏ธ