@wix/motion 1.666.0 → 1.667.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -35,12 +35,13 @@ function web(options) {
|
|
|
35
35
|
}
|
|
36
36
|
function style(options, asWeb = false) {
|
|
37
37
|
const {
|
|
38
|
-
direction = 'left'
|
|
38
|
+
direction = 'left',
|
|
39
|
+
distance
|
|
39
40
|
} = options.namedEffect;
|
|
40
41
|
const [floatIn] = getNames(options);
|
|
41
42
|
const fromParams = PARAMS_MAP[direction];
|
|
42
|
-
const translateX = fromParams.dx * fromParams.distance;
|
|
43
|
-
const translateY = fromParams.dy * fromParams.distance;
|
|
43
|
+
const translateX = fromParams.dx * (distance || fromParams.distance);
|
|
44
|
+
const translateY = fromParams.dy * (distance || fromParams.distance);
|
|
44
45
|
const custom = {
|
|
45
46
|
'--motion-translate-x': `${translateX}px`,
|
|
46
47
|
'--motion-translate-y': `${translateY}px`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_utils","require","getNames","_","PARAMS_MAP","top","dx","dy","distance","right","bottom","left","web","options","style","asWeb","direction","namedEffect","floatIn","fromParams","translateX","translateY","custom","name","easing","keyframes","offset","opacity","INITIAL_FRAME_OFFSET","transform","toKeyframeValue"],"sources":["../../../../src/library/entrance/FloatIn.ts"],"sourcesContent":["import type { TimeAnimationOptions, FloatIn } from '../../types';\nimport { INITIAL_FRAME_OFFSET, toKeyframeValue } from '../../utils';\n\nexport function getNames(_: TimeAnimationOptions) {\n return ['motion-floatIn'];\n}\n\nconst PARAMS_MAP = {\n top: { dx: 0, dy: -1, distance: 120 },\n right: { dx: 1, dy: 0, distance: 120 },\n bottom: { dx: 0, dy: 1, distance: 120 },\n left: { dx: -1, dy: 0, distance: 120 },\n};\n\nexport function web(options: TimeAnimationOptions) {\n return style(options, true);\n}\n\nexport function style(options: TimeAnimationOptions, asWeb = false) {\n const { direction = 'left' } = options.namedEffect as FloatIn;\n const [floatIn] = getNames(options);\n const fromParams = PARAMS_MAP[direction];\n\n const translateX = fromParams.dx * fromParams.distance;\n const translateY = fromParams.dy * fromParams.distance;\n\n const custom = {\n '--motion-translate-x': `${translateX}px`,\n '--motion-translate-y': `${translateY}px`,\n };\n\n return [\n {\n ...options,\n name: floatIn,\n easing: 'sineInOut',\n custom,\n keyframes: [\n {\n offset: 0,\n opacity: 0,\n easing: 'step-end',\n },\n {\n offset: INITIAL_FRAME_OFFSET,\n opacity: 0,\n transform: `translate(${toKeyframeValue(\n custom,\n '--motion-translate-x',\n asWeb,\n )}, ${toKeyframeValue(\n custom,\n '--motion-translate-y',\n asWeb,\n )}) rotate(var(--comp-rotate-z, 0deg))`,\n },\n {\n opacity: 'var(--comp-opacity, 1)',\n transform: 'translate(0, 0) rotate(var(--comp-rotate-z, 0deg))',\n },\n ],\n },\n ];\n}\n"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AAEO,SAASC,QAAQA,CAACC,CAAuB,EAAE;EAChD,OAAO,CAAC,gBAAgB,CAAC;AAC3B;AAEA,MAAMC,UAAU,GAAG;EACjBC,GAAG,EAAE;IAAEC,EAAE,EAAE,CAAC;IAAEC,EAAE,EAAE,CAAC,CAAC;IAAEC,QAAQ,EAAE;EAAI,CAAC;EACrCC,KAAK,EAAE;IAAEH,EAAE,EAAE,CAAC;IAAEC,EAAE,EAAE,CAAC;IAAEC,QAAQ,EAAE;EAAI,CAAC;EACtCE,MAAM,EAAE;IAAEJ,EAAE,EAAE,CAAC;IAAEC,EAAE,EAAE,CAAC;IAAEC,QAAQ,EAAE;EAAI,CAAC;EACvCG,IAAI,EAAE;IAAEL,EAAE,EAAE,CAAC,CAAC;IAAEC,EAAE,EAAE,CAAC;IAAEC,QAAQ,EAAE;EAAI;AACvC,CAAC;AAEM,SAASI,GAAGA,CAACC,OAA6B,EAAE;EACjD,OAAOC,KAAK,CAACD,OAAO,EAAE,IAAI,CAAC;AAC7B;AAEO,SAASC,KAAKA,CAACD,OAA6B,EAAEE,KAAK,GAAG,KAAK,EAAE;EAClE,MAAM;IAAEC,SAAS,GAAG;
|
|
1
|
+
{"version":3,"names":["_utils","require","getNames","_","PARAMS_MAP","top","dx","dy","distance","right","bottom","left","web","options","style","asWeb","direction","namedEffect","floatIn","fromParams","translateX","translateY","custom","name","easing","keyframes","offset","opacity","INITIAL_FRAME_OFFSET","transform","toKeyframeValue"],"sources":["../../../../src/library/entrance/FloatIn.ts"],"sourcesContent":["import type { TimeAnimationOptions, FloatIn } from '../../types';\nimport { INITIAL_FRAME_OFFSET, toKeyframeValue } from '../../utils';\n\nexport function getNames(_: TimeAnimationOptions) {\n return ['motion-floatIn'];\n}\n\nconst PARAMS_MAP = {\n top: { dx: 0, dy: -1, distance: 120 },\n right: { dx: 1, dy: 0, distance: 120 },\n bottom: { dx: 0, dy: 1, distance: 120 },\n left: { dx: -1, dy: 0, distance: 120 },\n};\n\nexport function web(options: TimeAnimationOptions) {\n return style(options, true);\n}\n\nexport function style(options: TimeAnimationOptions, asWeb = false) {\n const { direction = 'left', distance } = options.namedEffect as FloatIn & {\n distance?: number;\n };\n const [floatIn] = getNames(options);\n const fromParams = PARAMS_MAP[direction];\n\n const translateX = fromParams.dx * (distance || fromParams.distance);\n const translateY = fromParams.dy * (distance || fromParams.distance);\n\n const custom = {\n '--motion-translate-x': `${translateX}px`,\n '--motion-translate-y': `${translateY}px`,\n };\n\n return [\n {\n ...options,\n name: floatIn,\n easing: 'sineInOut',\n custom,\n keyframes: [\n {\n offset: 0,\n opacity: 0,\n easing: 'step-end',\n },\n {\n offset: INITIAL_FRAME_OFFSET,\n opacity: 0,\n transform: `translate(${toKeyframeValue(\n custom,\n '--motion-translate-x',\n asWeb,\n )}, ${toKeyframeValue(\n custom,\n '--motion-translate-y',\n asWeb,\n )}) rotate(var(--comp-rotate-z, 0deg))`,\n },\n {\n opacity: 'var(--comp-opacity, 1)',\n transform: 'translate(0, 0) rotate(var(--comp-rotate-z, 0deg))',\n },\n ],\n },\n ];\n}\n"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AAEO,SAASC,QAAQA,CAACC,CAAuB,EAAE;EAChD,OAAO,CAAC,gBAAgB,CAAC;AAC3B;AAEA,MAAMC,UAAU,GAAG;EACjBC,GAAG,EAAE;IAAEC,EAAE,EAAE,CAAC;IAAEC,EAAE,EAAE,CAAC,CAAC;IAAEC,QAAQ,EAAE;EAAI,CAAC;EACrCC,KAAK,EAAE;IAAEH,EAAE,EAAE,CAAC;IAAEC,EAAE,EAAE,CAAC;IAAEC,QAAQ,EAAE;EAAI,CAAC;EACtCE,MAAM,EAAE;IAAEJ,EAAE,EAAE,CAAC;IAAEC,EAAE,EAAE,CAAC;IAAEC,QAAQ,EAAE;EAAI,CAAC;EACvCG,IAAI,EAAE;IAAEL,EAAE,EAAE,CAAC,CAAC;IAAEC,EAAE,EAAE,CAAC;IAAEC,QAAQ,EAAE;EAAI;AACvC,CAAC;AAEM,SAASI,GAAGA,CAACC,OAA6B,EAAE;EACjD,OAAOC,KAAK,CAACD,OAAO,EAAE,IAAI,CAAC;AAC7B;AAEO,SAASC,KAAKA,CAACD,OAA6B,EAAEE,KAAK,GAAG,KAAK,EAAE;EAClE,MAAM;IAAEC,SAAS,GAAG,MAAM;IAAER;EAAS,CAAC,GAAGK,OAAO,CAACI,WAEhD;EACD,MAAM,CAACC,OAAO,CAAC,GAAGhB,QAAQ,CAACW,OAAO,CAAC;EACnC,MAAMM,UAAU,GAAGf,UAAU,CAACY,SAAS,CAAC;EAExC,MAAMI,UAAU,GAAGD,UAAU,CAACb,EAAE,IAAIE,QAAQ,IAAIW,UAAU,CAACX,QAAQ,CAAC;EACpE,MAAMa,UAAU,GAAGF,UAAU,CAACZ,EAAE,IAAIC,QAAQ,IAAIW,UAAU,CAACX,QAAQ,CAAC;EAEpE,MAAMc,MAAM,GAAG;IACb,sBAAsB,EAAE,GAAGF,UAAU,IAAI;IACzC,sBAAsB,EAAE,GAAGC,UAAU;EACvC,CAAC;EAED,OAAO,CACL;IACE,GAAGR,OAAO;IACVU,IAAI,EAAEL,OAAO;IACbM,MAAM,EAAE,WAAW;IACnBF,MAAM;IACNG,SAAS,EAAE,CACT;MACEC,MAAM,EAAE,CAAC;MACTC,OAAO,EAAE,CAAC;MACVH,MAAM,EAAE;IACV,CAAC,EACD;MACEE,MAAM,EAAEE,2BAAoB;MAC5BD,OAAO,EAAE,CAAC;MACVE,SAAS,EAAE,aAAa,IAAAC,sBAAe,EACrCR,MAAM,EACN,sBAAsB,EACtBP,KACF,CAAC,KAAK,IAAAe,sBAAe,EACnBR,MAAM,EACN,sBAAsB,EACtBP,KACF,CAAC;IACH,CAAC,EACD;MACEY,OAAO,EAAE,wBAAwB;MACjCE,SAAS,EAAE;IACb,CAAC;EAEL,CAAC,CACF;AACH","ignoreList":[]}
|
|
@@ -32,12 +32,13 @@ export function style(options, asWeb) {
|
|
|
32
32
|
asWeb = false;
|
|
33
33
|
}
|
|
34
34
|
const {
|
|
35
|
-
direction = 'left'
|
|
35
|
+
direction = 'left',
|
|
36
|
+
distance
|
|
36
37
|
} = options.namedEffect;
|
|
37
38
|
const [floatIn] = getNames(options);
|
|
38
39
|
const fromParams = PARAMS_MAP[direction];
|
|
39
|
-
const translateX = fromParams.dx * fromParams.distance;
|
|
40
|
-
const translateY = fromParams.dy * fromParams.distance;
|
|
40
|
+
const translateX = fromParams.dx * (distance || fromParams.distance);
|
|
41
|
+
const translateY = fromParams.dy * (distance || fromParams.distance);
|
|
41
42
|
const custom = {
|
|
42
43
|
'--motion-translate-x': `${translateX}px`,
|
|
43
44
|
'--motion-translate-y': `${translateY}px`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["INITIAL_FRAME_OFFSET","toKeyframeValue","getNames","_","PARAMS_MAP","top","dx","dy","distance","right","bottom","left","web","options","style","asWeb","direction","namedEffect","floatIn","fromParams","translateX","translateY","custom","name","easing","keyframes","offset","opacity","transform"],"sources":["../../../../src/library/entrance/FloatIn.ts"],"sourcesContent":["import type { TimeAnimationOptions, FloatIn } from '../../types';\nimport { INITIAL_FRAME_OFFSET, toKeyframeValue } from '../../utils';\n\nexport function getNames(_: TimeAnimationOptions) {\n return ['motion-floatIn'];\n}\n\nconst PARAMS_MAP = {\n top: { dx: 0, dy: -1, distance: 120 },\n right: { dx: 1, dy: 0, distance: 120 },\n bottom: { dx: 0, dy: 1, distance: 120 },\n left: { dx: -1, dy: 0, distance: 120 },\n};\n\nexport function web(options: TimeAnimationOptions) {\n return style(options, true);\n}\n\nexport function style(options: TimeAnimationOptions, asWeb = false) {\n const { direction = 'left' } = options.namedEffect as FloatIn;\n const [floatIn] = getNames(options);\n const fromParams = PARAMS_MAP[direction];\n\n const translateX = fromParams.dx * fromParams.distance;\n const translateY = fromParams.dy * fromParams.distance;\n\n const custom = {\n '--motion-translate-x': `${translateX}px`,\n '--motion-translate-y': `${translateY}px`,\n };\n\n return [\n {\n ...options,\n name: floatIn,\n easing: 'sineInOut',\n custom,\n keyframes: [\n {\n offset: 0,\n opacity: 0,\n easing: 'step-end',\n },\n {\n offset: INITIAL_FRAME_OFFSET,\n opacity: 0,\n transform: `translate(${toKeyframeValue(\n custom,\n '--motion-translate-x',\n asWeb,\n )}, ${toKeyframeValue(\n custom,\n '--motion-translate-y',\n asWeb,\n )}) rotate(var(--comp-rotate-z, 0deg))`,\n },\n {\n opacity: 'var(--comp-opacity, 1)',\n transform: 'translate(0, 0) rotate(var(--comp-rotate-z, 0deg))',\n },\n ],\n },\n ];\n}\n"],"mappings":"AACA,SAASA,oBAAoB,EAAEC,eAAe,QAAQ,aAAa;AAEnE,OAAO,SAASC,QAAQA,CAACC,CAAuB,EAAE;EAChD,OAAO,CAAC,gBAAgB,CAAC;AAC3B;AAEA,MAAMC,UAAU,GAAG;EACjBC,GAAG,EAAE;IAAEC,EAAE,EAAE,CAAC;IAAEC,EAAE,EAAE,CAAC,CAAC;IAAEC,QAAQ,EAAE;EAAI,CAAC;EACrCC,KAAK,EAAE;IAAEH,EAAE,EAAE,CAAC;IAAEC,EAAE,EAAE,CAAC;IAAEC,QAAQ,EAAE;EAAI,CAAC;EACtCE,MAAM,EAAE;IAAEJ,EAAE,EAAE,CAAC;IAAEC,EAAE,EAAE,CAAC;IAAEC,QAAQ,EAAE;EAAI,CAAC;EACvCG,IAAI,EAAE;IAAEL,EAAE,EAAE,CAAC,CAAC;IAAEC,EAAE,EAAE,CAAC;IAAEC,QAAQ,EAAE;EAAI;AACvC,CAAC;AAED,OAAO,SAASI,GAAGA,CAACC,OAA6B,EAAE;EACjD,OAAOC,KAAK,CAACD,OAAO,EAAE,IAAI,CAAC;AAC7B;AAEA,OAAO,SAASC,KAAKA,CAACD,OAA6B,EAAEE,KAAK,EAAU;EAAA,IAAfA,KAAK;IAALA,KAAK,GAAG,KAAK;EAAA;EAChE,MAAM;IAAEC,SAAS,GAAG;
|
|
1
|
+
{"version":3,"names":["INITIAL_FRAME_OFFSET","toKeyframeValue","getNames","_","PARAMS_MAP","top","dx","dy","distance","right","bottom","left","web","options","style","asWeb","direction","namedEffect","floatIn","fromParams","translateX","translateY","custom","name","easing","keyframes","offset","opacity","transform"],"sources":["../../../../src/library/entrance/FloatIn.ts"],"sourcesContent":["import type { TimeAnimationOptions, FloatIn } from '../../types';\nimport { INITIAL_FRAME_OFFSET, toKeyframeValue } from '../../utils';\n\nexport function getNames(_: TimeAnimationOptions) {\n return ['motion-floatIn'];\n}\n\nconst PARAMS_MAP = {\n top: { dx: 0, dy: -1, distance: 120 },\n right: { dx: 1, dy: 0, distance: 120 },\n bottom: { dx: 0, dy: 1, distance: 120 },\n left: { dx: -1, dy: 0, distance: 120 },\n};\n\nexport function web(options: TimeAnimationOptions) {\n return style(options, true);\n}\n\nexport function style(options: TimeAnimationOptions, asWeb = false) {\n const { direction = 'left', distance } = options.namedEffect as FloatIn & {\n distance?: number;\n };\n const [floatIn] = getNames(options);\n const fromParams = PARAMS_MAP[direction];\n\n const translateX = fromParams.dx * (distance || fromParams.distance);\n const translateY = fromParams.dy * (distance || fromParams.distance);\n\n const custom = {\n '--motion-translate-x': `${translateX}px`,\n '--motion-translate-y': `${translateY}px`,\n };\n\n return [\n {\n ...options,\n name: floatIn,\n easing: 'sineInOut',\n custom,\n keyframes: [\n {\n offset: 0,\n opacity: 0,\n easing: 'step-end',\n },\n {\n offset: INITIAL_FRAME_OFFSET,\n opacity: 0,\n transform: `translate(${toKeyframeValue(\n custom,\n '--motion-translate-x',\n asWeb,\n )}, ${toKeyframeValue(\n custom,\n '--motion-translate-y',\n asWeb,\n )}) rotate(var(--comp-rotate-z, 0deg))`,\n },\n {\n opacity: 'var(--comp-opacity, 1)',\n transform: 'translate(0, 0) rotate(var(--comp-rotate-z, 0deg))',\n },\n ],\n },\n ];\n}\n"],"mappings":"AACA,SAASA,oBAAoB,EAAEC,eAAe,QAAQ,aAAa;AAEnE,OAAO,SAASC,QAAQA,CAACC,CAAuB,EAAE;EAChD,OAAO,CAAC,gBAAgB,CAAC;AAC3B;AAEA,MAAMC,UAAU,GAAG;EACjBC,GAAG,EAAE;IAAEC,EAAE,EAAE,CAAC;IAAEC,EAAE,EAAE,CAAC,CAAC;IAAEC,QAAQ,EAAE;EAAI,CAAC;EACrCC,KAAK,EAAE;IAAEH,EAAE,EAAE,CAAC;IAAEC,EAAE,EAAE,CAAC;IAAEC,QAAQ,EAAE;EAAI,CAAC;EACtCE,MAAM,EAAE;IAAEJ,EAAE,EAAE,CAAC;IAAEC,EAAE,EAAE,CAAC;IAAEC,QAAQ,EAAE;EAAI,CAAC;EACvCG,IAAI,EAAE;IAAEL,EAAE,EAAE,CAAC,CAAC;IAAEC,EAAE,EAAE,CAAC;IAAEC,QAAQ,EAAE;EAAI;AACvC,CAAC;AAED,OAAO,SAASI,GAAGA,CAACC,OAA6B,EAAE;EACjD,OAAOC,KAAK,CAACD,OAAO,EAAE,IAAI,CAAC;AAC7B;AAEA,OAAO,SAASC,KAAKA,CAACD,OAA6B,EAAEE,KAAK,EAAU;EAAA,IAAfA,KAAK;IAALA,KAAK,GAAG,KAAK;EAAA;EAChE,MAAM;IAAEC,SAAS,GAAG,MAAM;IAAER;EAAS,CAAC,GAAGK,OAAO,CAACI,WAEhD;EACD,MAAM,CAACC,OAAO,CAAC,GAAGhB,QAAQ,CAACW,OAAO,CAAC;EACnC,MAAMM,UAAU,GAAGf,UAAU,CAACY,SAAS,CAAC;EAExC,MAAMI,UAAU,GAAGD,UAAU,CAACb,EAAE,IAAIE,QAAQ,IAAIW,UAAU,CAACX,QAAQ,CAAC;EACpE,MAAMa,UAAU,GAAGF,UAAU,CAACZ,EAAE,IAAIC,QAAQ,IAAIW,UAAU,CAACX,QAAQ,CAAC;EAEpE,MAAMc,MAAM,GAAG;IACb,sBAAsB,EAAE,GAAGF,UAAU,IAAI;IACzC,sBAAsB,EAAE,GAAGC,UAAU;EACvC,CAAC;EAED,OAAO,CACL;IACE,GAAGR,OAAO;IACVU,IAAI,EAAEL,OAAO;IACbM,MAAM,EAAE,WAAW;IACnBF,MAAM;IACNG,SAAS,EAAE,CACT;MACEC,MAAM,EAAE,CAAC;MACTC,OAAO,EAAE,CAAC;MACVH,MAAM,EAAE;IACV,CAAC,EACD;MACEE,MAAM,EAAE1B,oBAAoB;MAC5B2B,OAAO,EAAE,CAAC;MACVC,SAAS,EAAE,aAAa3B,eAAe,CACrCqB,MAAM,EACN,sBAAsB,EACtBP,KACF,CAAC,KAAKd,eAAe,CACnBqB,MAAM,EACN,sBAAsB,EACtBP,KACF,CAAC;IACH,CAAC,EACD;MACEY,OAAO,EAAE,wBAAwB;MACjCC,SAAS,EAAE;IACb,CAAC;EAEL,CAAC,CACF;AACH","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FloatIn.d.ts","sourceRoot":"","sources":["../../../../src/library/entrance/FloatIn.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAW,MAAM,aAAa,CAAC;AAGjE,wBAAgB,QAAQ,CAAC,CAAC,EAAE,oBAAoB,YAE/C;AASD,wBAAgB,GAAG,CAAC,OAAO,EAAE,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEhD;AAED,wBAAgB,KAAK,CAAC,OAAO,EAAE,oBAAoB,EAAE,KAAK,UAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"FloatIn.d.ts","sourceRoot":"","sources":["../../../../src/library/entrance/FloatIn.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAW,MAAM,aAAa,CAAC;AAGjE,wBAAgB,QAAQ,CAAC,CAAC,EAAE,oBAAoB,YAE/C;AASD,wBAAgB,GAAG,CAAC,OAAO,EAAE,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEhD;AAED,wBAAgB,KAAK,CAAC,OAAO,EAAE,oBAAoB,EAAE,KAAK,UAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA+CjE"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wix/motion",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.667.0",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "wow!Team",
|
|
@@ -83,5 +83,5 @@
|
|
|
83
83
|
"wallaby": {
|
|
84
84
|
"autoDetect": true
|
|
85
85
|
},
|
|
86
|
-
"falconPackageHash": "
|
|
86
|
+
"falconPackageHash": "21ec612c97f6689165f3b221e0e16ac1bcf4cfa9584e7b328205631b"
|
|
87
87
|
}
|