+<!DOCTYPE html><html class="dark"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>@okikio/animate (no-pjax)</title><meta name="description" content=""><meta name="color-scheme" content="dark light"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" type="image/svg+xml" href="./favicon.svg"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Material+Icons&family=Material+Icons+Round&display=block" rel="stylesheet"><link rel="stylesheet" href="./css/app.css"><script src="./js/theme.min.js" async></script><script src="./js/webanimation-polyfill.min.js"></script></head><body><nav class="navbar"><div class="navbar-bg"><div class="container"><div class="navbar-shadow"></div></div></div><div class="navbar-bg"><div class="container"><div class="navbar-border"></div></div></div><div class="container"><div class="navbar-frame"><a class="navbar-logo" href="./index.html">@okikio/native</a><div class="mobile"><a class="btn btn-highlight" href="https://github.com/okikio/native#readme" target="_blank" rel="noopener">Github</a><button class="theme-toggle" type="button"><span class="icon">dark_mode</span></button><button class="navbar-toggle" type="button"><span class="icon">menu</span></button></div><div class="navbar-collapse collapse mobile"><ul class="navbar-list"><a href="./index.html" data-path="(index|/$)(.html)?" data-transition="default">Home</a><a href="./about.html" data-path="/about(.html)?" data-transition="SlideLeft">About</a><a href="./other.html" data-path="/other(.html)?" data-transition="BigTransition">Other</a><a href="./animate.html" data-path="/animate(.html)?" data-prevent="self">@okikio/animate (no-pjax)</a></ul></div><div class="desktop"><div class="navbar-collapse"><ul class="navbar-list"><a href="./index.html" data-path="(index|/$)(.html)?" data-transition="default">Home</a><a href="./about.html" data-path="/about(.html)?" data-transition="SlideLeft">About</a><a href="./other.html" data-path="/other(.html)?" data-transition="BigTransition">Other</a><a href="./animate.html" data-path="/animate(.html)?" data-prevent="self">@okikio/animate (no-pjax)</a><a class="btn btn-highlight" href="https://github.com/okikio/native#readme" target="_blank" rel="noopener">Github</a><button class="theme-toggle" type="button"><span class="icon">dark_mode</span></button></ul></div></div></div></div></nav><div id="big-transition"><div id="logo"><h1 class="font-semibold text-5xl mb-2">@okikio/native</h1></div><div id="big-transition-horizontal"><div></div><div></div><div></div><div></div></div></div><div class="navbar-offset"></div><main data-wrapper><link rel="stylesheet" href="./css/animate.css" defer><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" defer><div class="empty"></div><div class="container px-5 py-2 sm:max-w-screen-xl"><div class="rounded-lg intro-animation"><h1 class="py-24 text-5xl font-semibold">@okikio/animate</h1><div class="morph-demo p-6 bg-gray-200 rounded-lg intro-animation dark:bg-quaternary"><div class="svg-1 flex justify-evenly flex-wrap"><div class="svg-demo"><h2 class="text-center text-lg font-bold">SVG Morphing (Using d)</h2><svg width="256" height="112" viewbox="0 0 10 10"><path id="using-d" d="M2,5 S2,-2 4,5 S7,8 8,4"></path></svg></div><div class="svg-demo"><h2 class="text-center text-lg font-bold">SVG Morphing (Using flubberjs)</h2><svg width="256" height="112" viewbox="0 0 20 23"><path id="using-flubber" fill="none" stroke="currentColor" stroke-width="1" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path></svg></div></div><div class="controls row mx-0 mt-5 align-items-center"><div class="col-2"><button class="btn-icon" id="playstate-toggle" type="button" title="Play/Pause Toggle" data-playstate="paused"><i class="fa fa-play" aria-hidden="true"></i><i class="fa fa-pause" aria-hidden="true"></i><i class="fa fa-redo" aria-hidden="true"></i></button><span class="text-center" id="progress-output">0</span></div><input class="col-10 form-control-range" id="progress" type="range" value="0" min="0" max="100" step="0.001"/></div></div><div class="bg-gray-200 dark:bg-quaternary rounded-lg intro-animation"><div class="playback-demo p-6"><h2 class="text-lg font-bold mb-2">Multiple Targets with Random Values</h2><div class="el-placement"><div class="contain"><div class="el"></div><div class="el-initial"></div></div><div class="contain"><div class="el"></div><div class="el-initial"></div></div><div class="contain"><div class="el"></div><div class="el-initial"></div></div></div><div class="add-remove-btns flex justify-center my-5 align-items-center"><button class="btn-icon" id="add-el" type="button" title="Add element"><i class="fa fa-plus" aria-hidden="true"></i></button><button class="btn-icon" id="remove-el" type="button" title="Remove element"><i class="fa fa-minus" aria-hidden="true"></i></button></div><div class="controls row mx-0 mt-5 align-items-center"><div class="col-2"><button class="btn-icon" id="playstate-toggle" type="button" title="Play/Pause Toggle" data-playstate="paused"><i class="fa fa-play" aria-hidden="true"></i><i class="fa fa-pause" aria-hidden="true"></i><i class="fa fa-redo" aria-hidden="true"></i></button><span class="text-center" id="progress-output">0</span></div><input class="col-10 form-control-range" id="progress" type="range" value="0" min="0" max="100" step="0.001"/></div></div></div><div class="p-6 mt-6 bg-gray-200 dark:bg-quaternary rounded-lg intro-animation"><div class="motion-path-demo"><div class="flex justify-evenly flex-wrap"><div class="motion-path svg-demo"><h2 class="text-center text-lg font-bold">Motion Path/Offset Path</h2><div class="relative"><div class="small square shadow el-initial"></div><div class="small square el el-1"></div><svg width="256" height="112" viewbox="0 0 256 112"><path id="follow-path" fill="none" stroke="currentColor" stroke-width="1" d="M8,56 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z"></path></svg></div></div><div class="motion-path svg-demo"><h2 class="text-center text-lg font-bold">getTotalLength()</h2><div class="relative"><div class="small square shadow el-initial"></div><div class="small square el el-2"></div><svg width="256" height="112" viewbox="0 0 256 112"><path id="follow-path" fill="none" stroke="currentColor" stroke-width="1" d="M8,56 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z"></path></svg></div></div></div><div class="controls row mx-0 mt-5 align-items-center"><div class="col-2"><button class="btn-icon" id="playstate-toggle" type="button" title="Play/Pause Toggle" data-playstate="paused"><i class="fa fa-play" aria-hidden="true"></i><i class="fa fa-pause" aria-hidden="true"></i><i class="fa fa-redo" aria-hidden="true"></i></button><span class="text-center" id="progress-output">0</span></div><input class="col-10 form-control-range" id="progress" type="range" value="0" min="0" max="100" step="0.001"/></div></div></div></div></div></main><footer class="footer text-gray-500 text-right dark:text-secondary"><div class="container p-5 align-middle lg:max-w-screen-xl"><p class="bg-gray-200 dark:bg-quaternary inline-block px-4 py-2 rounded-md"><span> Made by </span><a href="https://github.com/okikio" target="_blank">Okiki Ojo</a><span> Based on </span><a href="https://github.com/rezozero/starting-blocks" target="_blank">Starting blocks</a>.</p></div></footer><script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=default,es2015,es2018,Array.prototype.includes,Map,Set,Promise" async></script><script src="./js/legacy.min.js" nomodule></script><script src="./js/main.min.js" type="module" async></script></body></html>
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4&size=40){kind=avatar}
0 commit comments