Socket
Socket
Sign inDemoInstall

@motionone/svelte

Package Overview
Dependencies
Maintainers
2
Versions
50
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@motionone/svelte - npm Package Compare versions

Comparing version 10.5.2 to 10.6.0-rc.1

236

dist/index.js

@@ -178,30 +178,13 @@ function noop$1() { }

}
// flush() calls callbacks in this order:
// 1. All beforeUpdate callbacks, in order: parents before children
// 2. All bind:this callbacks, in reverse order: children before parents.
// 3. All afterUpdate callbacks, in order: parents before children. EXCEPT
// for afterUpdates called during the initial onMount, which are called in
// reverse order: children before parents.
// Since callbacks might update component values, which could trigger another
// call to flush(), the following steps guard against this:
// 1. During beforeUpdate, any updated components will be added to the
// dirty_components array and will cause a reentrant call to flush(). Because
// the flush index is kept outside the function, the reentrant call will pick
// up where the earlier call left off and go through all dirty components. The
// current_component value is saved and restored so that the reentrant call will
// not interfere with the "parent" flush() call.
// 2. bind:this callbacks cannot trigger new flush() calls.
// 3. During afterUpdate, any updated components will NOT have their afterUpdate
// callback called a second time; the seen_callbacks set, outside the flush()
// function, guarantees this behavior.
let flushing = false;
const seen_callbacks = new Set();
let flushidx = 0; // Do *not* move this inside the flush() function
function flush() {
const saved_component = current_component;
if (flushing)
return;
flushing = true;
do {
// first, call beforeUpdate functions
// and update components
while (flushidx < dirty_components.length) {
const component = dirty_components[flushidx];
flushidx++;
for (let i = 0; i < dirty_components.length; i += 1) {
const component = dirty_components[i];
set_current_component(component);

@@ -212,3 +195,2 @@ update(component.$$);

dirty_components.length = 0;
flushidx = 0;
while (binding_callbacks.length)

@@ -233,4 +215,4 @@ binding_callbacks.pop()();

update_scheduled = false;
flushing = false;
seen_callbacks.clear();
set_current_component(saved_component);
}

@@ -454,5 +436,48 @@ function update($$) {

const clamp = (min, max, v) => Math.min(Math.max(v, min), max);
const defaults = {
duration: 0.3,
delay: 0,
endDelay: 0,
repeat: 0,
easing: "ease",
};
const isNumber = (value) => typeof value === "number";
const isEasingGenerator = (easing) => typeof easing === "object" &&
Boolean(easing.createAnimation);
const isCubicBezier = (easing) => Array.isArray(easing) && isNumber(easing[0]);
const isEasingList = (easing) => Array.isArray(easing) && !isNumber(easing[0]);
const mix = (min, max, progress) => -progress * min + progress * max + min;
const noop = () => { };
const noopReturn = (v) => v;
const progress = (min, max, value) => max - min === 0 ? 1 : (value - min) / (max - min);
function fillOffset(offset, remaining) {
const min = offset[offset.length - 1];
for (let i = 1; i <= remaining; i++) {
const offsetProgress = progress(0, remaining, i);
offset.push(mix(min, 1, offsetProgress));
}
}
function defaultOffset(length) {
const offset = [0];
fillOffset(offset, length - 1);
return offset;
}
const time = {
ms: (seconds) => seconds * 1000,
s: (milliseconds) => milliseconds / 1000,
};
const wrap = (min, max, v) => {
const rangeSize = max - min;
return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min;
};
/**

@@ -547,47 +572,2 @@ * A list of all transformable axes. We'll use this list to generated a version

const ms = (seconds) => seconds * 1000;
const isNumber = (value) => typeof value === "number";
const isCubicBezier = (easing) => Array.isArray(easing) && isNumber(easing[0]);
const isEasingList = (easing) => Array.isArray(easing) && !isNumber(easing[0]);
const isCustomEasing = (easing) => typeof easing === "object" &&
Boolean(easing.createAnimation);
const convertEasing = (easing) => isCubicBezier(easing) ? cubicBezierAsString(easing) : easing;
const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
const testAnimation = (keyframes) => document.createElement("div").animate(keyframes, { duration: 0.001 });
const featureTests = {
cssRegisterProperty: () => typeof CSS !== "undefined" &&
Object.hasOwnProperty.call(CSS, "registerProperty"),
waapi: () => Object.hasOwnProperty.call(Element.prototype, "animate"),
partialKeyframes: () => {
try {
testAnimation({ opacity: [1] });
}
catch (e) {
return false;
}
return true;
},
finished: () => Boolean(testAnimation({ opacity: [0, 1] }).finished),
};
const results = {};
const supports = {};
for (const key in featureTests) {
supports[key] = () => {
if (results[key] === undefined)
results[key] = featureTests[key]();
return results[key];
};
}
const defaults = {
duration: 0.3,
delay: 0,
endDelay: 0,
repeat: 0,
easing: "ease",
};
/*

@@ -643,7 +623,7 @@ Bezier function generator

const clamp = (min, max, v) => Math.min(Math.max(v, min), max);
const steps = (steps, direction = "end") => (progress) => {
progress =
direction === "end" ? Math.min(progress, 0.999) : Math.max(progress, 0.001);
direction === "end"
? Math.min(progress, 0.999)
: Math.max(progress, 0.001);
const expanded = progress * steps;

@@ -681,46 +661,2 @@ const rounded = direction === "end" ? Math.floor(expanded) : Math.ceil(expanded);

}
/*
Value in range from progress
Given a lower limit and an upper limit, we return the value within
that range as expressed by progress (usually a number from 0 to 1)
So progress = 0.5 would change
from -------- to
to
from ---- to
E.g. from = 10, to = 20, progress = 0.5 => 15
@param [number]: Lower limit of range
@param [number]: Upper limit of range
@param [number]: The progress between lower and upper limits expressed 0-1
@return [number]: Value as calculated from progress within range (not limited within range)
*/
const mix = (from, to, progress) => -progress * from + progress * to + from;
/*
Progress within given range
Given a lower limit and an upper limit, we return the progress
(expressed as a number 0-1) represented by the given value.
@param [number]: Lower limit
@param [number]: Upper limit
@param [number]: Value to find progress within given range
@return [number]: Progress of value within range as expressed 0-1
*/
const progress = (from, to, value) => {
return to - from === 0 ? 1 : (value - from) / (to - from);
};
const wrap = (min, max, v) => {
const rangeSize = max - min;
return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min;
};
function getEasingForSegment(easing, i) {

@@ -732,17 +668,4 @@ return isEasingList(easing)

function fillOffset(offset, remaining) {
const min = offset[offset.length - 1];
for (let i = 1; i <= remaining; i++) {
const offsetProgress = progress(0, remaining, i);
offset.push(mix(min, 1, offsetProgress));
}
}
function defaultOffset(length) {
const offset = [0];
fillOffset(offset, length - 1);
return offset;
}
const clampProgress = (p) => Math.min(1, Math.max(p, 0));
function slowInterpolateNumbers(output, input = defaultOffset(output.length), easing = noopReturn) {
function interpolate(output, input = defaultOffset(output.length), easing = noopReturn) {
const length = output.length;

@@ -770,3 +693,3 @@ /**

class NumberAnimation {
class Animation {
constructor(output, keyframes = [0, 1], { easing = defaults.easing, duration = defaults.duration, delay = defaults.delay, endDelay = defaults.endDelay, repeat = defaults.repeat, offset, direction = "normal", } = {}) {

@@ -784,9 +707,9 @@ this.startTime = 0;

/**
* We don't currently support custom easing (spring, glide etc) in NumberAnimation
* We don't currently support custom easing (spring, glide etc) in Animation
* (although this is completely possible), so this will have been hydrated by
* animateStyle.
*/
if (isCustomEasing(easing))
if (isEasingGenerator(easing))
easing = "ease";
const interpolate = slowInterpolateNumbers(keyframes, offset, isEasingList(easing)
const interpolate$1 = interpolate(keyframes, offset, isEasingList(easing)
? easing.map(getEasingFunction)

@@ -844,3 +767,3 @@ : getEasingFunction(easing));

}
const latest = interpolate(t >= totalDuration ? 1 : Math.min(iterationProgress, 1));
const latest = interpolate$1(t >= totalDuration ? 1 : Math.min(iterationProgress, 1));
output(latest);

@@ -909,2 +832,31 @@ const isAnimationFinished = this.playState === "finished" || t >= totalDuration + endDelay;

const convertEasing = (easing) => isCubicBezier(easing) ? cubicBezierAsString(easing) : easing;
const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
const testAnimation = (keyframes) => document.createElement("div").animate(keyframes, { duration: 0.001 });
const featureTests = {
cssRegisterProperty: () => typeof CSS !== "undefined" &&
Object.hasOwnProperty.call(CSS, "registerProperty"),
waapi: () => Object.hasOwnProperty.call(Element.prototype, "animate"),
partialKeyframes: () => {
try {
testAnimation({ opacity: [1] });
}
catch (e) {
return false;
}
return true;
},
finished: () => Boolean(testAnimation({ opacity: [0, 1] }).finished),
};
const results = {};
const supports = {};
for (const key in featureTests) {
supports[key] = () => {
if (results[key] === undefined)
results[key] = featureTests[key]();
return results[key];
};
}
function hydrateKeyframes(keyframes, readInitialValue) {

@@ -998,3 +950,3 @@ for (let i = 0; i < keyframes.length; i++) {

let keyframes = hydrateKeyframes(keyframesList(keyframesDefinition), readInitialValue);
if (isCustomEasing(easing)) {
if (isEasingGenerator(easing)) {
const custom = easing.createAnimation(keyframes, readInitialValue, valueIsTransform, name, data);

@@ -1040,5 +992,5 @@ easing = custom.easing;

const animationOptions = {
delay: ms(delay),
duration: ms(duration),
endDelay: ms(endDelay),
delay: time.ms(delay),
duration: time.ms(duration),
endDelay: time.ms(endDelay),
easing: !isEasingList(easing) ? convertEasing(easing) : undefined,

@@ -1101,3 +1053,3 @@ direction,

};
animation = new NumberAnimation(render, keyframes, Object.assign(Object.assign({}, options), { duration,
animation = new Animation(render, keyframes, Object.assign(Object.assign({}, options), { duration,
easing }));

@@ -1524,3 +1476,3 @@ }

/* src/Motion.svelte generated by Svelte v3.45.0 */
/* src/Motion.svelte generated by Svelte v3.44.2 */

@@ -1527,0 +1479,0 @@ function create_fragment(ctx) {

6

package.json
{
"name": "@motionone/svelte",
"version": "10.5.2",
"version": "10.6.0-rc.1",
"description": "A tiny, performant animation library for Svelte",

@@ -17,3 +17,3 @@ "author": "Matt Perry",

"dependencies": {
"@motionone/dom": "^10.5.2",
"@motionone/dom": "^10.6.0-rc.1",
"tslib": "^2.3.1"

@@ -34,3 +34,3 @@ },

},
"gitHead": "580f3fbffc18931ccdb627e01ac2d50f087d01af"
"gitHead": "9c905aa4610011855bfd7827758f9c43f4929c0c"
}
README.md→README.md
dist/index.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc