Using (a.k.a WAAPI) in the React way. Let's create highly-performant, flexible and manipulable web animations in the modern world. Hope you guys 👍🏻 it! Web Animations API hook ⚡️ Try yourself: https://use-web-animations.netlify.app ⚡️ Try yourself: https://use-web-animations.netlify.app#animations Features 🚀 Animate on the with highly-performant and manipulable way, using . Web Web Animations API 🎣 Easy to use, based on React . hook 🎛 Super flexible that can cover that you need. API design all the cases 🎞 for you, based on . Built-ins animations Animate.css 🔩 Supports custom refs for . some reasons 📜 Supports type definition. TypeScript 🗄️ Server-side rendering compatibility. 🦔 Tiny size ( ). No external dependencies, aside for the `react`. ~ 4.4KB gzipped Usage The design of the hook not only inherits the DX of the but also provides useful features and sugar events to us. Here are some examples to show you how does it work. Create an animation by the and options (these are the of the ). API Web Animations API Basic Usage keyframes animationOptions parameters Element.animate() 📦 Play on CodeSandbox useWebAnimations ; App = { { ref, playState } = useWebAnimations({ : { : , background: [ , , ], }, : { : , duration: , iterations: , direction: , easing: , }, : { }, : { }, : { }, }); ( <p>🍿 Animation is {playState}</p> <div className="target" ref={ref} />
    </div> import from "@wellyshen/use-web-animations" const => () const keyframes transform "translateX(500px)" // Move by 500px "red" "blue" "green" // Go through three colors animationOptions delay 500 // Start with a 500ms delay 1000 // Run for 1000ms 2 // Repeat once "alternate" // Run the animation forwards and then backwards "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 < = > div className "container" );
}; Playback Control The shortcoming with existing technologies was the lack of playback control. The Web Animations API provides several useful methods for controlling playback: play, pause, reverse, cancel, finish, seek, control speed via the of the interface. This hook exposes the animation instance for us to interact with animations, we can access it by the return value. methods Animation getAnimation() 📦 Play on CodeSandbox useWebAnimations ; App = { { ref, playState, getAnimation } = useWebAnimations({ : , autoPlay: , keyframes: { : }, : { : , : },
  }); play = {
    getAnimation().play();
  }; pause = {
    getAnimation().pause();
  }; reverse = {
    getAnimation().reverse();
  }; cancel = {
    getAnimation().cancel();
  }; finish = {
    getAnimation().finish();
  }; seek = { animation = getAnimation(); time = (animation.effect.getTiming().duration / ) * e.target.value;
    animation.currentTime = time;
  }; updatePlaybackRate = {
    getAnimation().updatePlaybackRate(e.target.value);
  }; ( <button onClick={play}>Play</button> <button onClick={pause}>Pause</button> <button onClick={reverse}>Reverse</button> <button onClick={cancel}>Cancel</button> <button onClick={finish}>Finish</button> <input type="range" onChange={seek} />
      <input type="number" defaultValue="1" onChange={updatePlaybackRate} />
      <div className="target" ref={ref} />
    </div>
  );
}; import from "@wellyshen/use-web-animations" const => () const playbackRate 0.5 // Change playback rate, default is 1 false // Automatically starts the animation, default is true transform "translateX(500px)" animationOptions duration 1000 fill "forwards" const => () const => () const => () const => () const => () const ( ) => e const const 100 const ( ) => e return < = > div className "container" Getting Animation's Information When using the Web Animations API, we can get the information of an animation via the of the interface. However, we can get the information of an animation by the return value as well. properties Animation getAnimation() useWebAnimations ; App = { { ref, getAnimation } = useWebAnimations({ : { : }, : { : , : },
  }); speedUp = { animation = getAnimation();
    animation.updatePlaybackRate(animation.playbackRate * );
  }; jumpToHalf = { animation = getAnimation();
    animation.currentTime = animation.effect.getTiming().duration / ;
  }; ( <button onClick={speedUp}>Speed Up</button> <button onClick={jumpToHalf}>Jump to Half</button> <div className="target" ref={ref} />
    </div> import from "@wellyshen/use-web-animations" const => () const keyframes transform "translateX(500px)" animationOptions duration 1000 fill "forwards" const => () const 0.25 const => () const 2 return < = > div className "container" );
}; The animation instance isn't a part of , which means we need to access it by the whenever we need. If you want to monitor an animation's information, here's the event for you. The event is implemented by the internally and the event callback is triggered when the is running or changes. React state getAnimation() onUpdate requestAnimationFrame animation.playState { useState } ; useWebAnimations ; App = { [showEl, setShowEl] = useState( ); { ref } = useWebAnimations({ : { : }, : { : , : }, : { (animation.currentTime > animation.effect.getTiming().duration / )
        setShowEl( );
    },
  }); ( <div className="some-element" />}
      <div className="target" ref={ref} />
    </div>
  );
}; import from "react" import from "@wellyshen/use-web-animations" const => () const false const keyframes transform "translateX(500px)" animationOptions duration 1000 fill "forwards" onUpdate ( ) => { animation } if 2 true return {showEl && < = > div className "container" Dynamic Interactions with Animation We can create and play an animation at the we want by the method, which is implemented based on the . It's useful for interactions and the . animationOptions animate Element.animate() composite modes Let's create a mouse interaction effect: 📦 Play on CodeSandbox { useEffect } ; useWebAnimations ; App = { { ref, animate } = useWebAnimations();

  useEffect( { .addEventListener( , (e) => { animate({ : { : }, : { : , : },
      });
    });
  }, [animate]); ( <div className="target" ref={ref} />
    </div> import from "react" import from "@wellyshen/use-web-animations" const => () const => () document "mousemove" // The target will follow the mouse cursor keyframes transform `translate( px, px)` ${e.clientX} ${e.clientY} animationOptions duration 500 fill "forwards" return < = > div className "container" );
}; Create a bounce effect via lifecycle and composite mode: useWebAnimations ; App = { { ref, animate } = useWebAnimations({ : , keyframes: [{ : , : }, { : }], : { : , : }, : { (animation.id === ) ;

      animate({ : , : [
          { : , : },
          { : , : },
        ], : { : , : },
      });
    },
  }); ( <div className="target" ref={ref} />
    </div> import from "@wellyshen/use-web-animations" const => () const id "fall" // Set animation id, default is empty string 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 repeating if "bounce" return id "bounce" keyframes top "500px" easing "ease-in" top "10px" easing "ease-out" animationOptions duration 300 composite "add" return < = > div className "container" );
}; ⚠️ Composite modes isn't fully supported by all the browsers, please check the carefully before using it. browser compatibility Use Built-in Animations Too lazy to think about animation? We provide a collection of ready-to-use animations for you, they are implemented based on . Animate.css 👉🏻 Check out the demo useWebAnimations, { bounce } ; App = { { ref } = useWebAnimations({ ...bounce }); ( <div className="target" ref={ref} />
    </div> import from "@wellyshen/use-web-animations" const => () // Add a pre-defined effect to the target const return < = > div className "container" );
}; We can customize the built-in animation by overriding its properties: { keyframes, animationOptions } = bounce; { ref } = useWebAnimations({
  keyframes, : {
    ...animationOptions, : , duration: animationOptions.duration * , },
}); const const animationOptions delay 1000 // Delay 1s 0.75 // Speed up the animation See all available animations Thanks for reading, for more usage details checkout the project's GitHub page: https://github.com/wellyshen/use-web-animations You can also install this package is distributed via . npm $ yarn add @wellyshen/use-web-animations $ npm install --save @wellyshen/use-web-animations # or

Super

Target

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Creating Highly-Performant Animations using Web Animations API and React hooks

Too Long; Didn't Read

Companies Mentioned

welly

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Creating Highly-Performant Animations using Web Animations API and React hooks

Too Long; Didn't Read

Companies Mentioned

welly

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES