Features

Requirement

Installation

$ yarn add @wellyshen/use-web-animations# or$ npm install --save @wellyshen/use-web-animations

Before We Start

Usage

Basic Usage

importuseWebAnimationsfrom"@wellyshen/use-web-animations";constApp=()=>{const{ ref, playState}=useWebAnimations({keyframes:{transform:"translateX(500px)",// Move by 500pxbackground:["red","blue","green"],// Go through three colors},animationOptions:{delay:500,// Start with a 500ms delayduration:1000,// Run for 1000msiterations:2,// Repeat oncedirection:"alternate",// Run the animation forwards and then backwardseasing:"ease-in-out",// Use a fancy timing function},onReady:({ playState, animate, animation})=>{// Triggered when the animation is ready to play},onUpdate:({ playState, animate, animation})=>{// Triggered when the animation enters the running state or changes state},onFinish:({ playState, animate, animation})=>{// Triggered when the animation enters the finished state},// More useful options...});return(<divclassName="container"><p>🍿 Animation is{playState}</p><divclassName="target"ref={ref}/></div>);};

letprevPending=true;constApp=()=>{const{ ref}=useWebAnimations({// ...onUpdate:({ playState,animation:{ pending}})=>{if(prevPending&&!pending){console.log("Animation is ready to play");}prevPending=pending;if(playState==="finished"){console.log("Animation has finished playing");}},});// ...};

Setting/Updating Animation

const{ animation}=useWebAnimations();constchangeAnim=()=>animation({keyframes:{transform:["translateX(0)","translateX(100px)"]},animationOptions:1000,id:"123",playbackRate:1,autoPlay:true,});

Playback Control

importuseWebAnimationsfrom"@wellyshen/use-web-animations";constApp=()=>{const{ ref, playState, getAnimation}=useWebAnimations({playbackRate:0.5,// Change playback rate, default is 1autoPlay:false,// Automatically starts the animation, default is truekeyframes:{transform:"translateX(500px)"},animationOptions:{duration:1000,fill:"forwards"},});constplay=()=>{getAnimation().play();};constpause=()=>{getAnimation().pause();};constreverse=()=>{getAnimation().reverse();};constcancel=()=>{getAnimation().cancel();};constfinish=()=>{getAnimation().finish();};constseek=(e)=>{constanimation=getAnimation();consttime=(animation.effect.getTiming().duration/100)*e.target.value;animation.currentTime=time;};constupdatePlaybackRate=(e)=>{getAnimation().updatePlaybackRate(e.target.value);};return(<divclassName="container"><buttononClick={play}>Play</button><buttononClick={pause}>Pause</button><buttononClick={reverse}>Reverse</button><buttononClick={cancel}>Cancel</button><buttononClick={finish}>Finish</button><inputtype="range"onChange={seek}/><inputtype="number"defaultValue="1"onChange={updatePlaybackRate}/><divclassName="target"ref={ref}/></div>);};

Getting Animation's Information

importuseWebAnimationsfrom"@wellyshen/use-web-animations";constApp=()=>{const{ ref, getAnimation}=useWebAnimations({keyframes:{transform:"translateX(500px)"},animationOptions:{duration:1000,fill:"forwards"},});constspeedUp=()=>{constanimation=getAnimation();animation.updatePlaybackRate(animation.playbackRate*0.25);};constjumpToHalf=()=>{constanimation=getAnimation();animation.currentTime=animation.effect.getTiming().duration/2;};return(<divclassName="container"><buttononClick={speedUp}>Speed Up</button><buttononClick={jumpToHalf}>Jump to Half</button><divclassName="target"ref={ref}/></div>);};

import{useState}from"react";importuseWebAnimationsfrom"@wellyshen/use-web-animations";constApp=()=>{const[showEl,setShowEl]=useState(false);const{ ref}=useWebAnimations({keyframes:{transform:"translateX(500px)"},animationOptions:{duration:1000,fill:"forwards"},onUpdate:({ animation})=>{if(animation.currentTime>animation.effect.getTiming().duration/2)setShowEl(true);},});return(<divclassName="container">{showEl&&<divclassName="some-element"/>}<divclassName="target"ref={ref}/></div>);};

Dynamic Interactions with Animation

import{useEffect}from"react";importuseWebAnimationsfrom"@wellyshen/use-web-animations";constApp=()=>{const{ ref, animate}=useWebAnimations();useEffect(()=>{document.addEventListener("mousemove",(e)=>{// The target will follow the mouse cursoranimate({keyframes:{transform:`translate(${e.clientX}px,${e.clientY}px)`},animationOptions:{duration:500,fill:"forwards"},});});},[animate]);return(<divclassName="container"><divclassName="target"ref={ref}/></div>);};

importuseWebAnimationsfrom"@wellyshen/use-web-animations";constApp=()=>{const{ ref, animate}=useWebAnimations({id:"fall",// Set animation id, default is empty stringkeyframes:[{top:0,easing:"ease-in"},{top:"500px"}],animationOptions:{duration:300,fill:"forwards"},onFinish:({ animate, animation})=>{// Lifecycle is triggered by each animation, we can check the id to prevent animation from repeatingif(animation.id==="bounce")return;animate({id:"bounce",keyframes:[{top:"500px",easing:"ease-in"},{top:"10px",easing:"ease-out"},],animationOptions:{duration:300,composite:"add"},});},});return(<divclassName="container"><divclassName="target"ref={ref}/></div>);};

Use Built-in Animations

importuseWebAnimations,{bounce}from"@wellyshen/use-web-animations";constApp=()=>{// Add a pre-defined effect to the targetconst{ ref}=useWebAnimations({ ...bounce});return(<divclassName="container"><divclassName="target"ref={ref}/></div>);};

const{ keyframes, animationOptions}=bounce;const{ ref}=useWebAnimations({  keyframes,animationOptions:{    ...animationOptions,delay:1000,// Delay 1sduration:animationOptions.duration*0.75,// Speed up the animation},});

Use Your Ownref

constref=useRef();const{ playState}=useWebAnimations({ ref});

Working in TypeScript

constApp=()=>{const{ ref}=useWebAnimations<HTMLDivElement>();return<divref={ref}/>;};

API

constreturnObj=useWebAnimations(options?:object);

Return Object

Parameter

Use Polyfill

$ yarn add web-animations-js# or$ npm install --save web-animations-js

import"web-animations-js/web-animations.min";

Articles / Blog Posts

Contributors ✨