2020 PJAX, Rezo Zero — Starting Blocks, , barbajs. , Starting Blocks , . , , awwwards.com PJAX, .
, , — , , / . Fullstack- Python @okikio/animate . , .
MDN:
Web Animations API (WAAPI) JavaScript. API CSS, . API , , window.requestAnimationFrame().
, PJAX, MoOx/pjax; , PJAX , Fetch API DOM.
Web Animations API CSS JavaScript, . DOM, CSS .
CSS JavaScript : . Web Animations API ( — WAAPI) , . , !
Web Animations API — WAAPI. Web Animations API , «Web Animations API», , , «WAAPI»; , , .
WAAPI Web Audio API, , , . — . .
@okikio/animate
@okikio/animate — . animateplus animejs; Web Animations API , (~ 5,79 ) gzip.
, , . , « », GitHub okikio/native, — , .
PJAX — okikio/native. WAAPI , , , , okikio/animate — , .
: 2020 , , use-web-animations wellyshen. react , animate.css, use-web-animations .) , , - , 80% .
, okikio/native okikio/native. , , okikio/native okikio/animate — .
okikio/animate
WAAPI . , API, okikio/animate, WAAPI , ( ) API -. , README .
@okikio/animate Animate ( API -).
import { Animate } from"@okikio/animate";
new Animate({
target: [/* ... */],
duration: 2000,
// ...
});
Animate , Animation WAAPI ( — Animation, : ), Animate , , .
, WAAPI . Animate.prototype.mainAnimation, Animation WeakMap, — KeyframeEffect. :
Animate.prototype.getAnimation(el)
, , okikio/animate. , WAAPI, MDN , okikio/animate, okikio/native GitHub.
,
Animate , animate, Animate .
import animate from "@okikio/animate";
// or
import { animate } from "@okikio/animate";
animate({
target: [/* ... */],
duration: 2000,
// ...
});
import animate from "@okikio/animate";
// Do this if you installed it via the script tag: const { animate } = window.animate;
(async () => {
let [options] = await animate({
target: ".div",
// Units are added automatically for transform CSS properties
translateX: [0, 300],
duration: 2000, // In milliseconds
speed: 2,
});
console.log("The Animation is done...");
})();
:
Motion Path:
, :
, :
animate.ts animate.pug GitHub. , , Pug, . README.
Gitpod, , , «Open in Gitpod», . Codepen . animejs okikio/animate .
, , , @okikio/animate target, targets. Set. @okikio/animate , , animejs. (: , «Animation Options & CSS Properties as Methods» README.)
okikio/animate , , , Web Animations API — , , okikio/animate . , , , , (Issue), - [ README, Github Discussions] GitHub.
, . :
. , .
, , async/await. , timelineOffset , - - -, , animejs.
okikio/animate .
-
@okikio/animate , . . , . , , , . Spring WAAPI - .
, @okikio/animate , translateX, translate, scale, skew . . @okikio/animate@2.2.0 , CSS. , GitHub.
:
animate({
targets: [".div", document.querySelectorAll(".el")],
// By default "px", will be applied
translateX: 300,
left: 500,
margin: "56 70 8em 70%",
// "deg" will be applied to rotate instead of px
rotate: 120,
// No units will be auto applied
color: "rgb(25, 25, 25)",
"text-shadow": "25px 5px 15px rgb(25, 25, 25)"
});
, ScrollTimeline, . , - , , ScrollTimeline Chrome Canary 92 , . okikio/animate, . :
Bramus ! , Canary- Chrome Experimental Web Platform Chrome Flags. Firefox . , ScrollTimeline, . Google Developers Animation Worklets.
. ~5,79 , , . bundlephobia, , , , bundle.js.org, , . @okikio/animate, , , bundlephobia.
. web-animations-next.min.js web-animations-js. KeyframeEffect.
JavaScript, , KeyframeEffect, , , . async/defer , , . Map, Set Promise.
<html>
<head>
<!-- Async -->
<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=default,es2015,es2018,Array.prototype.includes,Map,Set,Promise" async></script>
<!-- NO Async/Defer -->
<script src="./js/webanimation-polyfill.min.js"></script>
</head>
<body>
<!-- Content -->
</body>
</html>
ES6+, esbuild , . ES5 esbuild ( minify), Typescript terser; ES5, , babel. , Gulpfile .
@okikio/animate — Web Animations API (WAAPI), , , animejs , .
, . -, , Fullstack- Python, , DevOps.
