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

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

hackernoon.com hackernoon.com1 year ago in#Dev Love62

Using Web Animations API (a.k.a WAAPI) in the React hook way. Let’s create highly-performant, flexible and manipulable web animations in the modern world. Hope you guys 👍🏻 it! Features 🚀 Animate on the Web with highly-performant and manipulable way, using Web Animations API. 🎣 Easy to use, based on React hook. 🧸 Built-ins polyfill for better browser compatibility. 🎛 Super flexible API design which can cover all the cases that you need. 🎞 Built-ins animations for you, based on Animate.css. 🔩 Supports custom refs for some reasons. 📜 Supports TypeScript type definition. 🗄️ Server-side rendering compatibility. Usage The API design of the hook not only inherits the DX of the Web Animations API but also provides useful features and sugar events to us. Here are some examples to show you how does it work. Basic UsageCreate an animation by the keyframes (formats) and timing (properties) options. import React from “react”; import useWebAnimations from “@wellyshen/use-web-animations”; const App = () ={ const { ref, playState } = useWebAnimations({ keyframes: { transform: [“translateX(500px)”], // Move by 500px background: [“red”, “blue”, “green”], // Go through three colors }, timing: { delay: 500, // Start with a 500ms delay duration: 1000, // Run for 1000ms iterations: 2, // Repeat once direction: “alternate”, // Run the animation forwards and then backwards easing: “ease-in-out”, // Use a fancy timing function }, onReady: ({ playState, animate, animation }) ={ // Triggered when the animation is ready to play (Google Chrome: available in v84 ) }, 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 (Google Chrome: available in v84 ) }, // More useful options… }); return ( 🍿 Animation is {playState} ); }; 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 methods of the Animation interface. This hook exposes the animation instance for us to interact with animations, we can access it by the getAnimation() return value. import React from “react”; import useWebAnimations from “@wellyshen/use-web-animations”; const App = () ={ const { ref, playState, getAnimation } = useWebAnimations({ playbackRate: 0.5, // Change playback rate, default is 1 autoPlay: false, // Automatically starts the animation, default is true keyframes: { transform: [“translateX(500px)”] }, timing: { duration: 1000, fill: “forwards” }, }); const play = () ={ getAnimation().play(); }; const pause = () ={ getAnimation().pause(); }; const reverse = () ={ getAnimation().reverse(); }; const cancel = () ={ getAnimation().cancel(); }; const finish = () ={ getAnimation().finish(); }; const seek = (e) ={ const animation = getAnimation(); const time = (animation.effect.getTiming().duration / 100) * e.target.value; animation.currentTime = time; }; const updatePlaybackRate = (e) ={ getAnimation().updatePlaybackRate(e.target.value); }; return ( Play Pause Reverse Cancel Finish ); }; Getting Animation’s Information When using the Web Animations API,  » Read More

Like to keep reading?

This article first appeared on hackernoon.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply