@animini/core - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

dist/animini-core.cjs.dev.js

@@ -65,3 +65,3 @@ 'use strict';
     this.distance = this.target - this.value;
-    this.precision = Math.min(1, Math.abs(this.distance) * 0.0001);
+    this.precision = Math.min(1, Math.abs(this.distance) * 0.001);
   }
@@ -87,60 +87,2 @@ };
 
-const raf = {
-  rafId: 0,
-  running: false,
-  queue: new Set(),
-  time: {},
-
-  frame() {
-    if (!this.running) return;
-    this.updateTime();
-    this.queue.forEach(cb => cb());
-    this.rafId = window.requestAnimationFrame(this.frame.bind(this));
-  },
-
-  run() {
-    if (!this.running) {
-      this.time = {
-        start: this.now(),
-        elapsed: 0,
-        delta: 0,
-        _elapsed: 0
-      };
-      this.rafId = window.requestAnimationFrame(this.frame.bind(this));
-      this.running = true;
-    }
-  },
-
-  start(cb) {
-    this.queue.add(cb);
-    this.run();
-  },
-
-  stop(cb) {
-    if (!cb) return;
-    this.queue.delete(cb);
-    if (!this.queue.size) this.stopAll();
-  },
-
-  stopAll() {
-    window.cancelAnimationFrame(this.rafId);
-    this.running = false;
-  },
-
-  now() {
-    return typeof performance != 'undefined' ? performance.now() : Date.now();
-  },
-
-  updateTime() {
-    const ts = this.now();
-
-    const _elapsed = ts - this.time.start;
-
-    this.time.delta = Math.min(64, _elapsed - this.time._elapsed);
-    this.time._elapsed = _elapsed;
-    this.time.elapsed += this.time.delta;
-  }
-
-};
-
 function lerpFn() {
@@ -154,10 +96,12 @@ return lerp(this.value, this.target, this.config.factor || 0.05);
 
-function Animated(initialValue, fn, adapter) {
+function Animated(value, fn, adapter, loop) {
   this.config = {};
   this.time = {};
+  this.loop = loop;
   this._movingChildren = 0;
-  this.adapter = adapter;
+  this.parse = adapter === null || adapter === void 0 ? void 0 : adapter.parse;
+  this.onUpdate = adapter === null || adapter === void 0 ? void 0 : adapter.onUpdate;
   this.setFn(fn);
-  this._value = initialValue;
-  this.length = getLength(initialValue);
+  this._value = adapter !== null && adapter !== void 0 && adapter.parseInitial ? adapter.parseInitial(value) : value;
+  this.length = getLength(this._value);
   this.children = map(this._value, (_v, i) => new AnimatedValue(this, i));
@@ -179,12 +123,5 @@ getset(this, 'idle', () => this._movingChildren <= 0);
 
-Animated.prototype.parse = function (value) {
-  var _this$adapter;
-
-  if ((_this$adapter = this.adapter) !== null && _this$adapter !== void 0 && _this$adapter.parse) return this.adapter.parse(value);
-  return value;
-};
-
 Animated.prototype.start = function (target, config = {}) {
   this.time.elapsed = 0;
-  this.target = this.parse(target);
+  this.target = this.parse ? this.parse(target) : target;
   this._movingChildren = 0;
@@ -204,4 +141,4 @@ this.config = config;
 Animated.prototype.update = function () {
-  this.time.elapsed += raf.time.delta;
-  this.time.delta = raf.time.delta;
+  this.time.elapsed += this.loop.time.delta;
+  this.time.delta = this.loop.time.delta;
   each(this.children, child => {
@@ -215,3 +152,67 @@ if (!child.idle) {
 
-function useAniminiCore(target, targetPayload, fn) {
+function now() {
+  return typeof performance != 'undefined' ? performance.now() : Date.now();
+}
+
+function FrameLoop() {
+  this.rafId = 0;
+  this.running = false;
+  this.queue = new Set();
+  this.time = {};
+}
+
+FrameLoop.prototype.tick = function () {
+  this.update();
+  this.rafId = window.requestAnimationFrame(this.tick.bind(this));
+};
+
+FrameLoop.prototype.update = function () {
+  if (!this.running) return;
+  this.updateTime();
+  this.queue.forEach(cb => cb());
+};
+
+FrameLoop.prototype.run = function () {
+  if (!this.running) {
+    this.time = {
+      start: now(),
+      elapsed: 0,
+      delta: 0,
+      _elapsed: 0
+    };
+    this.tick();
+    this.running = true;
+  }
+};
+
+FrameLoop.prototype.start = function (cb) {
+  this.queue.add(cb);
+  this.run();
+};
+
+FrameLoop.prototype.stop = function (cb) {
+  if (!cb) return;
+  this.queue.delete(cb);
+  if (!this.queue.size) this.stopAll();
+};
+
+FrameLoop.prototype.stopAll = function () {
+  this.rafId && window.cancelAnimationFrame(this.rafId);
+  this.running = false;
+};
+
+FrameLoop.prototype.updateTime = function () {
+  const ts = now();
+
+  const _elapsed = ts - this.time.start;
+
+  this.time.delta = ~~Math.min(64, _elapsed - this.time._elapsed);
+  this.time._elapsed = _elapsed;
+  this.time.elapsed += this.time.delta;
+};
+
+const GlobalLoop = new FrameLoop();
+
+function useAniminiCore(target, elementPayload, fn) {
+  const loop = target.loop || GlobalLoop;
   const rafId = react.useRef();
@@ -230,8 +231,11 @@ const el = react.useRef(null);
     animations.forEach((animated, key) => {
+      var _animated$onUpdate;
+
       animated.update();
       rawValues.current[key] = animated.value;
+      (_animated$onUpdate = animated.onUpdate) === null || _animated$onUpdate === void 0 ? void 0 : _animated$onUpdate.call(animated, el.current, key);
       idle &= animated.idle;
     });
-    (_target$setValues = target.setValues) === null || _target$setValues === void 0 ? void 0 : _target$setValues.call(target, rawValues.current, el.current, targetPayload);
-    if (idle) raf.stop(update);
+    (_target$setValues = target.setValues) === null || _target$setValues === void 0 ? void 0 : _target$setValues.call(target, rawValues.current, el.current, elementPayload);
+    if (idle) loop.stop(update);
   }, [target, animations]);
@@ -243,5 +247,5 @@ const start = react.useCallback((to, config) => {
       if (!animations.has(key)) {
-        const [value, adapter] = target.getInitialValueAndAdapter(el.current, key, targetPayload);
+        const [value, adapter] = target.getInitialValueAndAdapter(el.current, key, elementPayload);
 
-        const _animated = new Animated(value, fn, adapter);
+        const _animated = new Animated(value, fn, adapter, loop);
 
@@ -256,6 +260,6 @@ animations.set(key, _animated);
 
-    if (!idle) rafId.current = raf.start(update);
+    if (!idle) rafId.current = loop.start(update);
   }, [update, fn, animations]);
   react.useEffect(() => {
-    return () => raf.stop(update);
+    return () => loop.stop(update);
   }, [update]);
@@ -270,2 +274,4 @@ const get = react.useCallback(() => rawValues.current, []);
 exports.spring = spring.spring;
+exports.FrameLoop = FrameLoop;
+exports.GlobalLoop = GlobalLoop;
 exports.each = each;
@@ -272,0 +278,0 @@ exports.equal = equal;

dist/animini-core.cjs.prod.js

@@ -65,3 +65,3 @@ 'use strict';
     this.distance = this.target - this.value;
-    this.precision = Math.min(1, Math.abs(this.distance) * 0.0001);
+    this.precision = Math.min(1, Math.abs(this.distance) * 0.001);
   }
@@ -87,60 +87,2 @@ };
 
-const raf = {
-  rafId: 0,
-  running: false,
-  queue: new Set(),
-  time: {},
-
-  frame() {
-    if (!this.running) return;
-    this.updateTime();
-    this.queue.forEach(cb => cb());
-    this.rafId = window.requestAnimationFrame(this.frame.bind(this));
-  },
-
-  run() {
-    if (!this.running) {
-      this.time = {
-        start: this.now(),
-        elapsed: 0,
-        delta: 0,
-        _elapsed: 0
-      };
-      this.rafId = window.requestAnimationFrame(this.frame.bind(this));
-      this.running = true;
-    }
-  },
-
-  start(cb) {
-    this.queue.add(cb);
-    this.run();
-  },
-
-  stop(cb) {
-    if (!cb) return;
-    this.queue.delete(cb);
-    if (!this.queue.size) this.stopAll();
-  },
-
-  stopAll() {
-    window.cancelAnimationFrame(this.rafId);
-    this.running = false;
-  },
-
-  now() {
-    return typeof performance != 'undefined' ? performance.now() : Date.now();
-  },
-
-  updateTime() {
-    const ts = this.now();
-
-    const _elapsed = ts - this.time.start;
-
-    this.time.delta = Math.min(64, _elapsed - this.time._elapsed);
-    this.time._elapsed = _elapsed;
-    this.time.elapsed += this.time.delta;
-  }
-
-};
-
 function lerpFn() {
@@ -154,10 +96,12 @@ return lerp(this.value, this.target, this.config.factor || 0.05);
 
-function Animated(initialValue, fn, adapter) {
+function Animated(value, fn, adapter, loop) {
   this.config = {};
   this.time = {};
+  this.loop = loop;
   this._movingChildren = 0;
-  this.adapter = adapter;
+  this.parse = adapter === null || adapter === void 0 ? void 0 : adapter.parse;
+  this.onUpdate = adapter === null || adapter === void 0 ? void 0 : adapter.onUpdate;
   this.setFn(fn);
-  this._value = initialValue;
-  this.length = getLength(initialValue);
+  this._value = adapter !== null && adapter !== void 0 && adapter.parseInitial ? adapter.parseInitial(value) : value;
+  this.length = getLength(this._value);
   this.children = map(this._value, (_v, i) => new AnimatedValue(this, i));
@@ -179,12 +123,5 @@ getset(this, 'idle', () => this._movingChildren <= 0);
 
-Animated.prototype.parse = function (value) {
-  var _this$adapter;
-
-  if ((_this$adapter = this.adapter) !== null && _this$adapter !== void 0 && _this$adapter.parse) return this.adapter.parse(value);
-  return value;
-};
-
 Animated.prototype.start = function (target, config = {}) {
   this.time.elapsed = 0;
-  this.target = this.parse(target);
+  this.target = this.parse ? this.parse(target) : target;
   this._movingChildren = 0;
@@ -204,4 +141,4 @@ this.config = config;
 Animated.prototype.update = function () {
-  this.time.elapsed += raf.time.delta;
-  this.time.delta = raf.time.delta;
+  this.time.elapsed += this.loop.time.delta;
+  this.time.delta = this.loop.time.delta;
   each(this.children, child => {
@@ -215,3 +152,67 @@ if (!child.idle) {
 
-function useAniminiCore(target, targetPayload, fn) {
+function now() {
+  return typeof performance != 'undefined' ? performance.now() : Date.now();
+}
+
+function FrameLoop() {
+  this.rafId = 0;
+  this.running = false;
+  this.queue = new Set();
+  this.time = {};
+}
+
+FrameLoop.prototype.tick = function () {
+  this.update();
+  this.rafId = window.requestAnimationFrame(this.tick.bind(this));
+};
+
+FrameLoop.prototype.update = function () {
+  if (!this.running) return;
+  this.updateTime();
+  this.queue.forEach(cb => cb());
+};
+
+FrameLoop.prototype.run = function () {
+  if (!this.running) {
+    this.time = {
+      start: now(),
+      elapsed: 0,
+      delta: 0,
+      _elapsed: 0
+    };
+    this.tick();
+    this.running = true;
+  }
+};
+
+FrameLoop.prototype.start = function (cb) {
+  this.queue.add(cb);
+  this.run();
+};
+
+FrameLoop.prototype.stop = function (cb) {
+  if (!cb) return;
+  this.queue.delete(cb);
+  if (!this.queue.size) this.stopAll();
+};
+
+FrameLoop.prototype.stopAll = function () {
+  this.rafId && window.cancelAnimationFrame(this.rafId);
+  this.running = false;
+};
+
+FrameLoop.prototype.updateTime = function () {
+  const ts = now();
+
+  const _elapsed = ts - this.time.start;
+
+  this.time.delta = ~~Math.min(64, _elapsed - this.time._elapsed);
+  this.time._elapsed = _elapsed;
+  this.time.elapsed += this.time.delta;
+};
+
+const GlobalLoop = new FrameLoop();
+
+function useAniminiCore(target, elementPayload, fn) {
+  const loop = target.loop || GlobalLoop;
   const rafId = react.useRef();
@@ -230,8 +231,11 @@ const el = react.useRef(null);
     animations.forEach((animated, key) => {
+      var _animated$onUpdate;
+
       animated.update();
       rawValues.current[key] = animated.value;
+      (_animated$onUpdate = animated.onUpdate) === null || _animated$onUpdate === void 0 ? void 0 : _animated$onUpdate.call(animated, el.current, key);
       idle &= animated.idle;
     });
-    (_target$setValues = target.setValues) === null || _target$setValues === void 0 ? void 0 : _target$setValues.call(target, rawValues.current, el.current, targetPayload);
-    if (idle) raf.stop(update);
+    (_target$setValues = target.setValues) === null || _target$setValues === void 0 ? void 0 : _target$setValues.call(target, rawValues.current, el.current, elementPayload);
+    if (idle) loop.stop(update);
   }, [target, animations]);
@@ -243,5 +247,5 @@ const start = react.useCallback((to, config) => {
       if (!animations.has(key)) {
-        const [value, adapter] = target.getInitialValueAndAdapter(el.current, key, targetPayload);
+        const [value, adapter] = target.getInitialValueAndAdapter(el.current, key, elementPayload);
 
-        const _animated = new Animated(value, fn, adapter);
+        const _animated = new Animated(value, fn, adapter, loop);
 
@@ -256,6 +260,6 @@ animations.set(key, _animated);
 
-    if (!idle) rafId.current = raf.start(update);
+    if (!idle) rafId.current = loop.start(update);
   }, [update, fn, animations]);
   react.useEffect(() => {
-    return () => raf.stop(update);
+    return () => loop.stop(update);
   }, [update]);
@@ -270,2 +274,4 @@ const get = react.useCallback(() => rawValues.current, []);
 exports.spring = spring.spring;
+exports.FrameLoop = FrameLoop;
+exports.GlobalLoop = GlobalLoop;
 exports.each = each;
@@ -272,0 +278,0 @@ exports.equal = equal;

dist/animini-core.esm.js

@@ -61,3 +61,3 @@ import { useRef, useMemo, useEffect, useCallback } from 'react';
     this.distance = this.target - this.value;
-    this.precision = Math.min(1, Math.abs(this.distance) * 0.0001);
+    this.precision = Math.min(1, Math.abs(this.distance) * 0.001);
   }
@@ -83,60 +83,2 @@ };
 
-const raf = {
-  rafId: 0,
-  running: false,
-  queue: new Set(),
-  time: {},
-
-  frame() {
-    if (!this.running) return;
-    this.updateTime();
-    this.queue.forEach(cb => cb());
-    this.rafId = window.requestAnimationFrame(this.frame.bind(this));
-  },
-
-  run() {
-    if (!this.running) {
-      this.time = {
-        start: this.now(),
-        elapsed: 0,
-        delta: 0,
-        _elapsed: 0
-      };
-      this.rafId = window.requestAnimationFrame(this.frame.bind(this));
-      this.running = true;
-    }
-  },
-
-  start(cb) {
-    this.queue.add(cb);
-    this.run();
-  },
-
-  stop(cb) {
-    if (!cb) return;
-    this.queue.delete(cb);
-    if (!this.queue.size) this.stopAll();
-  },
-
-  stopAll() {
-    window.cancelAnimationFrame(this.rafId);
-    this.running = false;
-  },
-
-  now() {
-    return typeof performance != 'undefined' ? performance.now() : Date.now();
-  },
-
-  updateTime() {
-    const ts = this.now();
-
-    const _elapsed = ts - this.time.start;
-
-    this.time.delta = Math.min(64, _elapsed - this.time._elapsed);
-    this.time._elapsed = _elapsed;
-    this.time.elapsed += this.time.delta;
-  }
-
-};
-
 function lerpFn() {
@@ -150,10 +92,12 @@ return lerp(this.value, this.target, this.config.factor || 0.05);
 
-function Animated(initialValue, fn, adapter) {
+function Animated(value, fn, adapter, loop) {
   this.config = {};
   this.time = {};
+  this.loop = loop;
   this._movingChildren = 0;
-  this.adapter = adapter;
+  this.parse = adapter === null || adapter === void 0 ? void 0 : adapter.parse;
+  this.onUpdate = adapter === null || adapter === void 0 ? void 0 : adapter.onUpdate;
   this.setFn(fn);
-  this._value = initialValue;
-  this.length = getLength(initialValue);
+  this._value = adapter !== null && adapter !== void 0 && adapter.parseInitial ? adapter.parseInitial(value) : value;
+  this.length = getLength(this._value);
   this.children = map(this._value, (_v, i) => new AnimatedValue(this, i));
@@ -175,12 +119,5 @@ getset(this, 'idle', () => this._movingChildren <= 0);
 
-Animated.prototype.parse = function (value) {
-  var _this$adapter;
-
-  if ((_this$adapter = this.adapter) !== null && _this$adapter !== void 0 && _this$adapter.parse) return this.adapter.parse(value);
-  return value;
-};
-
 Animated.prototype.start = function (target, config = {}) {
   this.time.elapsed = 0;
-  this.target = this.parse(target);
+  this.target = this.parse ? this.parse(target) : target;
   this._movingChildren = 0;
@@ -200,4 +137,4 @@ this.config = config;
 Animated.prototype.update = function () {
-  this.time.elapsed += raf.time.delta;
-  this.time.delta = raf.time.delta;
+  this.time.elapsed += this.loop.time.delta;
+  this.time.delta = this.loop.time.delta;
   each(this.children, child => {
@@ -211,3 +148,67 @@ if (!child.idle) {
 
-function useAniminiCore(target, targetPayload, fn) {
+function now() {
+  return typeof performance != 'undefined' ? performance.now() : Date.now();
+}
+
+function FrameLoop() {
+  this.rafId = 0;
+  this.running = false;
+  this.queue = new Set();
+  this.time = {};
+}
+
+FrameLoop.prototype.tick = function () {
+  this.update();
+  this.rafId = window.requestAnimationFrame(this.tick.bind(this));
+};
+
+FrameLoop.prototype.update = function () {
+  if (!this.running) return;
+  this.updateTime();
+  this.queue.forEach(cb => cb());
+};
+
+FrameLoop.prototype.run = function () {
+  if (!this.running) {
+    this.time = {
+      start: now(),
+      elapsed: 0,
+      delta: 0,
+      _elapsed: 0
+    };
+    this.tick();
+    this.running = true;
+  }
+};
+
+FrameLoop.prototype.start = function (cb) {
+  this.queue.add(cb);
+  this.run();
+};
+
+FrameLoop.prototype.stop = function (cb) {
+  if (!cb) return;
+  this.queue.delete(cb);
+  if (!this.queue.size) this.stopAll();
+};
+
+FrameLoop.prototype.stopAll = function () {
+  this.rafId && window.cancelAnimationFrame(this.rafId);
+  this.running = false;
+};
+
+FrameLoop.prototype.updateTime = function () {
+  const ts = now();
+
+  const _elapsed = ts - this.time.start;
+
+  this.time.delta = ~~Math.min(64, _elapsed - this.time._elapsed);
+  this.time._elapsed = _elapsed;
+  this.time.elapsed += this.time.delta;
+};
+
+const GlobalLoop = new FrameLoop();
+
+function useAniminiCore(target, elementPayload, fn) {
+  const loop = target.loop || GlobalLoop;
   const rafId = useRef();
@@ -226,8 +227,11 @@ const el = useRef(null);
     animations.forEach((animated, key) => {
+      var _animated$onUpdate;
+
       animated.update();
       rawValues.current[key] = animated.value;
+      (_animated$onUpdate = animated.onUpdate) === null || _animated$onUpdate === void 0 ? void 0 : _animated$onUpdate.call(animated, el.current, key);
       idle &= animated.idle;
     });
-    (_target$setValues = target.setValues) === null || _target$setValues === void 0 ? void 0 : _target$setValues.call(target, rawValues.current, el.current, targetPayload);
-    if (idle) raf.stop(update);
+    (_target$setValues = target.setValues) === null || _target$setValues === void 0 ? void 0 : _target$setValues.call(target, rawValues.current, el.current, elementPayload);
+    if (idle) loop.stop(update);
   }, [target, animations]);
@@ -239,5 +243,5 @@ const start = useCallback((to, config) => {
       if (!animations.has(key)) {
-        const [value, adapter] = target.getInitialValueAndAdapter(el.current, key, targetPayload);
+        const [value, adapter] = target.getInitialValueAndAdapter(el.current, key, elementPayload);
 
-        const _animated = new Animated(value, fn, adapter);
+        const _animated = new Animated(value, fn, adapter, loop);
 
@@ -252,6 +256,6 @@ animations.set(key, _animated);
 
-    if (!idle) rafId.current = raf.start(update);
+    if (!idle) rafId.current = loop.start(update);
   }, [update, fn, animations]);
   useEffect(() => {
-    return () => raf.stop(update);
+    return () => loop.stop(update);
   }, [update]);
@@ -265,2 +269,2 @@ const get = useCallback(() => rawValues.current, []);
 
-export { each, equal, getset, lerp, map, useAniminiCore };
+export { FrameLoop, GlobalLoop, each, equal, getset, lerp, map, useAniminiCore };

package.json

 {
   "name": "@animini/core",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "small animation lib",
@@ -5,0 +5,0 @@ "keywords": [],

src/animated/Animated.js

 import { AnimatedValue } from './AnimatedValue'
-import { raf } from '../raf'
 import { each, map, getset, lerp } from '../utils'
@@ -13,12 +12,14 @@
 
-export function Animated(initialValue, fn, adapter) {
+export function Animated(value, fn, adapter, loop) {
   this.config = {}
   this.time = {}
+  this.loop = loop
 
   this._movingChildren = 0
-  this.adapter = adapter
+  this.parse = adapter?.parse
+  this.onUpdate = adapter?.onUpdate
   this.setFn(fn)
 
-  this._value = initialValue
-  this.length = getLength(initialValue)
+  this._value = adapter?.parseInitial ? adapter.parseInitial(value) : value
+  this.length = getLength(this._value)
 
@@ -42,10 +43,5 @@ this.children = map(this._value, (_v, i) => new AnimatedValue(this, i))
 
-Animated.prototype.parse = function (value) {
-  if (this.adapter?.parse) return this.adapter.parse(value)
-  return value
-}
-
 Animated.prototype.start = function (target, config = {}) {
   this.time.elapsed = 0
-  this.target = this.parse(target)
+  this.target = this.parse ? this.parse(target) : target
   this._movingChildren = 0
@@ -64,4 +60,4 @@ this.config = config
 Animated.prototype.update = function () {
-  this.time.elapsed += raf.time.delta
-  this.time.delta = raf.time.delta
+  this.time.elapsed += this.loop.time.delta
+  this.time.delta = this.loop.time.delta
 
@@ -68,0 +64,0 @@ each(this.children, (child) => {

src/animated/AnimatedValue.js

@@ -30,3 +30,3 @@ import { getset } from '../utils'
     this.distance = this.target - this.value
-    this.precision = Math.min(1, Math.abs(this.distance) * 0.0001)
+    this.precision = Math.min(1, Math.abs(this.distance) * 0.001)
   }
@@ -33,0 +33,0 @@ }

src/index.js

 export { useAniminiCore } from './useAniminiCore'
 export { spring } from './algorithms/spring'
 export * from './utils'
+export * from './FrameLoop'

src/useAniminiCore.js

 import { useRef, useCallback, useEffect, useMemo } from 'react'
 import { Animated } from './animated/Animated'
-import { raf } from './raf'
+import { GlobalLoop } from './FrameLoop'
 
-export function useAniminiCore(target, targetPayload, fn) {
+export function useAniminiCore(target, elementPayload, fn) {
+  const loop = target.loop || GlobalLoop
   const rafId = useRef()
@@ -23,6 +24,7 @@
       rawValues.current[key] = animated.value
+      animated.onUpdate?.(el.current, key)
       idle &= animated.idle
     })
-    target.setValues?.(rawValues.current, el.current, targetPayload)
-    if (idle) raf.stop(update)
+    target.setValues?.(rawValues.current, el.current, elementPayload)
+    if (idle) loop.stop(update)
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -36,4 +38,4 @@ }, [target, animations])
         if (!animations.has(key)) {
-          const [value, adapter] = target.getInitialValueAndAdapter(el.current, key, targetPayload)
-          const animated = new Animated(value, fn, adapter)
+          const [value, adapter] = target.getInitialValueAndAdapter(el.current, key, elementPayload)
+          const animated = new Animated(value, fn, adapter, loop)
           animations.set(key, animated)
@@ -45,3 +47,3 @@ }
       }
-      if (!idle) rafId.current = raf.start(update)
+      if (!idle) rafId.current = loop.start(update)
     },
@@ -53,3 +55,4 @@ // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => {
-    return () => raf.stop(update)
+    return () => loop.stop(update)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [update])
@@ -56,0 +59,0 @@

No alert changes

Improved metrics

Total package byte prevSize

38852

increased by11.81%

Number of package files

24

increased by14.29%

Lines of code

1189

increased by6.92%

No dependency changes