@wix/motion 1.663.0 → 1.665.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.
- package/dist/cjs/library/backgroundScroll/BgFade.js +6 -4
- package/dist/cjs/library/backgroundScroll/BgFade.js.map +1 -1
- package/dist/esm/library/backgroundScroll/BgFade.js +6 -4
- package/dist/esm/library/backgroundScroll/BgFade.js.map +1 -1
- package/dist/types/library/backgroundScroll/BgFade.d.ts +2 -2
- package/dist/types/library/backgroundScroll/BgFade.d.ts.map +1 -1
- package/package.json +2 -2
|
@@ -29,9 +29,11 @@ function style(options, asWeb = false) {
|
|
|
29
29
|
range = 'in'
|
|
30
30
|
} = options.namedEffect;
|
|
31
31
|
const isOut = range === 'out';
|
|
32
|
-
const fromValue = isOut ? 1 : 0;
|
|
33
|
-
const toValue = isOut ? 0 : 1;
|
|
34
32
|
const easing = isOut ? 'sineOut' : 'sineIn';
|
|
33
|
+
const custom = {
|
|
34
|
+
'--motion-bg-fade-from': isOut ? 1 : 0,
|
|
35
|
+
'--motion-bg-fade-to': isOut ? 0 : 1
|
|
36
|
+
};
|
|
35
37
|
const [bgFade] = getNames(options);
|
|
36
38
|
return [{
|
|
37
39
|
...options,
|
|
@@ -57,9 +59,9 @@ function style(options, asWeb = false) {
|
|
|
57
59
|
return isOut ? `calc(100vh + ${(0, _utils.toKeyframeValue)(options.measures || {}, '--motion-comp-height', asWeb)})` : `calc(50vh + ${(0, _utils.toKeyframeValue)(options.measures || {}, '--motion-comp-half-height', asWeb)})`;
|
|
58
60
|
},
|
|
59
61
|
keyframes: [{
|
|
60
|
-
opacity:
|
|
62
|
+
opacity: (0, _utils.toKeyframeValue)(custom, '--motion-bg-fade-from', asWeb)
|
|
61
63
|
}, {
|
|
62
|
-
opacity:
|
|
64
|
+
opacity: (0, _utils.toKeyframeValue)(custom, '--motion-bg-fade-to', asWeb)
|
|
63
65
|
}]
|
|
64
66
|
}];
|
|
65
67
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_utils","require","_utils2","getNames","_","prepare","dom","measures","measureCompHeight","web","options","style","asWeb","range","namedEffect","isOut","
|
|
1
|
+
{"version":3,"names":["_utils","require","_utils2","getNames","_","prepare","dom","measures","measureCompHeight","web","options","style","asWeb","range","namedEffect","isOut","easing","custom","bgFade","name","part","startOffset","offset","type","value","startOffsetAdd","endOffset","endOffsetAdd","toKeyframeValue","keyframes","opacity"],"sources":["../../../../src/library/backgroundScroll/BgFade.ts"],"sourcesContent":["import type {\n BgFade,\n DomApi,\n RangeOffset,\n AnimationExtraOptions,\n ScrubAnimationOptions,\n} from '../../types';\nimport { toKeyframeValue } from '../../utils';\nimport { measureCompHeight } from './utils';\n\nexport function getNames(_: ScrubAnimationOptions) {\n return ['motion-bgFade'];\n}\n\nexport function prepare(_: ScrubAnimationOptions, dom?: DomApi) {\n const measures = {\n '--motion-comp-height': '0px',\n '--motion-comp-half-height': '0px',\n };\n if (dom) {\n measureCompHeight(measures, dom, true);\n }\n return measures;\n}\n\nexport function web(\n options: ScrubAnimationOptions & AnimationExtraOptions,\n dom?: DomApi,\n) {\n options.measures = prepare(options, dom);\n\n return style(options, true);\n}\n\nexport function style(\n options: ScrubAnimationOptions & AnimationExtraOptions,\n asWeb = false,\n) {\n const { range = 'in' } = options.namedEffect as BgFade;\n const isOut = range === 'out';\n const easing = isOut ? 'sineOut' : 'sineIn';\n\n const custom = {\n '--motion-bg-fade-from': isOut ? 1 : 0,\n '--motion-bg-fade-to': isOut ? 0 : 1,\n };\n\n const [bgFade] = getNames(options);\n\n return [\n {\n ...options,\n name: bgFade,\n part: 'BG_LAYER',\n easing,\n startOffset: {\n name: 'cover',\n offset: { type: 'percentage', value: 0 },\n } as RangeOffset,\n startOffsetAdd: isOut ? '100vh' : '0px',\n endOffset: {\n name: 'cover',\n offset: { type: 'percentage', value: 0 },\n } as RangeOffset,\n get endOffsetAdd() {\n return isOut\n ? `calc(100vh + ${toKeyframeValue(\n options.measures || {},\n '--motion-comp-height',\n asWeb,\n )})`\n : `calc(50vh + ${toKeyframeValue(\n options.measures || {},\n '--motion-comp-half-height',\n asWeb,\n )})`;\n },\n keyframes: [\n {\n opacity: toKeyframeValue(custom, '--motion-bg-fade-from', asWeb),\n },\n {\n opacity: toKeyframeValue(custom, '--motion-bg-fade-to', asWeb),\n },\n ],\n },\n ];\n}\n"],"mappings":";;;;;;;AAOA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAEO,SAASE,QAAQA,CAACC,CAAwB,EAAE;EACjD,OAAO,CAAC,eAAe,CAAC;AAC1B;AAEO,SAASC,OAAOA,CAACD,CAAwB,EAAEE,GAAY,EAAE;EAC9D,MAAMC,QAAQ,GAAG;IACf,sBAAsB,EAAE,KAAK;IAC7B,2BAA2B,EAAE;EAC/B,CAAC;EACD,IAAID,GAAG,EAAE;IACP,IAAAE,yBAAiB,EAACD,QAAQ,EAAED,GAAG,EAAE,IAAI,CAAC;EACxC;EACA,OAAOC,QAAQ;AACjB;AAEO,SAASE,GAAGA,CACjBC,OAAsD,EACtDJ,GAAY,EACZ;EACAI,OAAO,CAACH,QAAQ,GAAGF,OAAO,CAACK,OAAO,EAAEJ,GAAG,CAAC;EAExC,OAAOK,KAAK,CAACD,OAAO,EAAE,IAAI,CAAC;AAC7B;AAEO,SAASC,KAAKA,CACnBD,OAAsD,EACtDE,KAAK,GAAG,KAAK,EACb;EACA,MAAM;IAAEC,KAAK,GAAG;EAAK,CAAC,GAAGH,OAAO,CAACI,WAAqB;EACtD,MAAMC,KAAK,GAAGF,KAAK,KAAK,KAAK;EAC7B,MAAMG,MAAM,GAAGD,KAAK,GAAG,SAAS,GAAG,QAAQ;EAE3C,MAAME,MAAM,GAAG;IACb,uBAAuB,EAAEF,KAAK,GAAG,CAAC,GAAG,CAAC;IACtC,qBAAqB,EAAEA,KAAK,GAAG,CAAC,GAAG;EACrC,CAAC;EAED,MAAM,CAACG,MAAM,CAAC,GAAGf,QAAQ,CAACO,OAAO,CAAC;EAElC,OAAO,CACL;IACE,GAAGA,OAAO;IACVS,IAAI,EAAED,MAAM;IACZE,IAAI,EAAE,UAAU;IAChBJ,MAAM;IACNK,WAAW,EAAE;MACXF,IAAI,EAAE,OAAO;MACbG,MAAM,EAAE;QAAEC,IAAI,EAAE,YAAY;QAAEC,KAAK,EAAE;MAAE;IACzC,CAAgB;IAChBC,cAAc,EAAEV,KAAK,GAAG,OAAO,GAAG,KAAK;IACvCW,SAAS,EAAE;MACTP,IAAI,EAAE,OAAO;MACbG,MAAM,EAAE;QAAEC,IAAI,EAAE,YAAY;QAAEC,KAAK,EAAE;MAAE;IACzC,CAAgB;IAChB,IAAIG,YAAYA,CAAA,EAAG;MACjB,OAAOZ,KAAK,GACR,gBAAgB,IAAAa,sBAAe,EAC7BlB,OAAO,CAACH,QAAQ,IAAI,CAAC,CAAC,EACtB,sBAAsB,EACtBK,KACF,CAAC,GAAG,GACJ,eAAe,IAAAgB,sBAAe,EAC5BlB,OAAO,CAACH,QAAQ,IAAI,CAAC,CAAC,EACtB,2BAA2B,EAC3BK,KACF,CAAC,GAAG;IACV,CAAC;IACDiB,SAAS,EAAE,CACT;MACEC,OAAO,EAAE,IAAAF,sBAAe,EAACX,MAAM,EAAE,uBAAuB,EAAEL,KAAK;IACjE,CAAC,EACD;MACEkB,OAAO,EAAE,IAAAF,sBAAe,EAACX,MAAM,EAAE,qBAAqB,EAAEL,KAAK;IAC/D,CAAC;EAEL,CAAC,CACF;AACH","ignoreList":[]}
|
|
@@ -25,9 +25,11 @@ export function style(options, asWeb) {
|
|
|
25
25
|
range = 'in'
|
|
26
26
|
} = options.namedEffect;
|
|
27
27
|
const isOut = range === 'out';
|
|
28
|
-
const fromValue = isOut ? 1 : 0;
|
|
29
|
-
const toValue = isOut ? 0 : 1;
|
|
30
28
|
const easing = isOut ? 'sineOut' : 'sineIn';
|
|
29
|
+
const custom = {
|
|
30
|
+
'--motion-bg-fade-from': isOut ? 1 : 0,
|
|
31
|
+
'--motion-bg-fade-to': isOut ? 0 : 1
|
|
32
|
+
};
|
|
31
33
|
const [bgFade] = getNames(options);
|
|
32
34
|
return [{
|
|
33
35
|
...options,
|
|
@@ -53,9 +55,9 @@ export function style(options, asWeb) {
|
|
|
53
55
|
return isOut ? `calc(100vh + ${toKeyframeValue(options.measures || {}, '--motion-comp-height', asWeb)})` : `calc(50vh + ${toKeyframeValue(options.measures || {}, '--motion-comp-half-height', asWeb)})`;
|
|
54
56
|
},
|
|
55
57
|
keyframes: [{
|
|
56
|
-
opacity:
|
|
58
|
+
opacity: toKeyframeValue(custom, '--motion-bg-fade-from', asWeb)
|
|
57
59
|
}, {
|
|
58
|
-
opacity:
|
|
60
|
+
opacity: toKeyframeValue(custom, '--motion-bg-fade-to', asWeb)
|
|
59
61
|
}]
|
|
60
62
|
}];
|
|
61
63
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["toKeyframeValue","measureCompHeight","getNames","_","prepare","dom","measures","web","options","style","asWeb","range","namedEffect","isOut","
|
|
1
|
+
{"version":3,"names":["toKeyframeValue","measureCompHeight","getNames","_","prepare","dom","measures","web","options","style","asWeb","range","namedEffect","isOut","easing","custom","bgFade","name","part","startOffset","offset","type","value","startOffsetAdd","endOffset","endOffsetAdd","keyframes","opacity"],"sources":["../../../../src/library/backgroundScroll/BgFade.ts"],"sourcesContent":["import type {\n BgFade,\n DomApi,\n RangeOffset,\n AnimationExtraOptions,\n ScrubAnimationOptions,\n} from '../../types';\nimport { toKeyframeValue } from '../../utils';\nimport { measureCompHeight } from './utils';\n\nexport function getNames(_: ScrubAnimationOptions) {\n return ['motion-bgFade'];\n}\n\nexport function prepare(_: ScrubAnimationOptions, dom?: DomApi) {\n const measures = {\n '--motion-comp-height': '0px',\n '--motion-comp-half-height': '0px',\n };\n if (dom) {\n measureCompHeight(measures, dom, true);\n }\n return measures;\n}\n\nexport function web(\n options: ScrubAnimationOptions & AnimationExtraOptions,\n dom?: DomApi,\n) {\n options.measures = prepare(options, dom);\n\n return style(options, true);\n}\n\nexport function style(\n options: ScrubAnimationOptions & AnimationExtraOptions,\n asWeb = false,\n) {\n const { range = 'in' } = options.namedEffect as BgFade;\n const isOut = range === 'out';\n const easing = isOut ? 'sineOut' : 'sineIn';\n\n const custom = {\n '--motion-bg-fade-from': isOut ? 1 : 0,\n '--motion-bg-fade-to': isOut ? 0 : 1,\n };\n\n const [bgFade] = getNames(options);\n\n return [\n {\n ...options,\n name: bgFade,\n part: 'BG_LAYER',\n easing,\n startOffset: {\n name: 'cover',\n offset: { type: 'percentage', value: 0 },\n } as RangeOffset,\n startOffsetAdd: isOut ? '100vh' : '0px',\n endOffset: {\n name: 'cover',\n offset: { type: 'percentage', value: 0 },\n } as RangeOffset,\n get endOffsetAdd() {\n return isOut\n ? `calc(100vh + ${toKeyframeValue(\n options.measures || {},\n '--motion-comp-height',\n asWeb,\n )})`\n : `calc(50vh + ${toKeyframeValue(\n options.measures || {},\n '--motion-comp-half-height',\n asWeb,\n )})`;\n },\n keyframes: [\n {\n opacity: toKeyframeValue(custom, '--motion-bg-fade-from', asWeb),\n },\n {\n opacity: toKeyframeValue(custom, '--motion-bg-fade-to', asWeb),\n },\n ],\n },\n ];\n}\n"],"mappings":"AAOA,SAASA,eAAe,QAAQ,aAAa;AAC7C,SAASC,iBAAiB,QAAQ,SAAS;AAE3C,OAAO,SAASC,QAAQA,CAACC,CAAwB,EAAE;EACjD,OAAO,CAAC,eAAe,CAAC;AAC1B;AAEA,OAAO,SAASC,OAAOA,CAACD,CAAwB,EAAEE,GAAY,EAAE;EAC9D,MAAMC,QAAQ,GAAG;IACf,sBAAsB,EAAE,KAAK;IAC7B,2BAA2B,EAAE;EAC/B,CAAC;EACD,IAAID,GAAG,EAAE;IACPJ,iBAAiB,CAACK,QAAQ,EAAED,GAAG,EAAE,IAAI,CAAC;EACxC;EACA,OAAOC,QAAQ;AACjB;AAEA,OAAO,SAASC,GAAGA,CACjBC,OAAsD,EACtDH,GAAY,EACZ;EACAG,OAAO,CAACF,QAAQ,GAAGF,OAAO,CAACI,OAAO,EAAEH,GAAG,CAAC;EAExC,OAAOI,KAAK,CAACD,OAAO,EAAE,IAAI,CAAC;AAC7B;AAEA,OAAO,SAASC,KAAKA,CACnBD,OAAsD,EACtDE,KAAK,EACL;EAAA,IADAA,KAAK;IAALA,KAAK,GAAG,KAAK;EAAA;EAEb,MAAM;IAAEC,KAAK,GAAG;EAAK,CAAC,GAAGH,OAAO,CAACI,WAAqB;EACtD,MAAMC,KAAK,GAAGF,KAAK,KAAK,KAAK;EAC7B,MAAMG,MAAM,GAAGD,KAAK,GAAG,SAAS,GAAG,QAAQ;EAE3C,MAAME,MAAM,GAAG;IACb,uBAAuB,EAAEF,KAAK,GAAG,CAAC,GAAG,CAAC;IACtC,qBAAqB,EAAEA,KAAK,GAAG,CAAC,GAAG;EACrC,CAAC;EAED,MAAM,CAACG,MAAM,CAAC,GAAGd,QAAQ,CAACM,OAAO,CAAC;EAElC,OAAO,CACL;IACE,GAAGA,OAAO;IACVS,IAAI,EAAED,MAAM;IACZE,IAAI,EAAE,UAAU;IAChBJ,MAAM;IACNK,WAAW,EAAE;MACXF,IAAI,EAAE,OAAO;MACbG,MAAM,EAAE;QAAEC,IAAI,EAAE,YAAY;QAAEC,KAAK,EAAE;MAAE;IACzC,CAAgB;IAChBC,cAAc,EAAEV,KAAK,GAAG,OAAO,GAAG,KAAK;IACvCW,SAAS,EAAE;MACTP,IAAI,EAAE,OAAO;MACbG,MAAM,EAAE;QAAEC,IAAI,EAAE,YAAY;QAAEC,KAAK,EAAE;MAAE;IACzC,CAAgB;IAChB,IAAIG,YAAYA,CAAA,EAAG;MACjB,OAAOZ,KAAK,GACR,gBAAgBb,eAAe,CAC7BQ,OAAO,CAACF,QAAQ,IAAI,CAAC,CAAC,EACtB,sBAAsB,EACtBI,KACF,CAAC,GAAG,GACJ,eAAeV,eAAe,CAC5BQ,OAAO,CAACF,QAAQ,IAAI,CAAC,CAAC,EACtB,2BAA2B,EAC3BI,KACF,CAAC,GAAG;IACV,CAAC;IACDgB,SAAS,EAAE,CACT;MACEC,OAAO,EAAE3B,eAAe,CAACe,MAAM,EAAE,uBAAuB,EAAEL,KAAK;IACjE,CAAC,EACD;MACEiB,OAAO,EAAE3B,eAAe,CAACe,MAAM,EAAE,qBAAqB,EAAEL,KAAK;IAC/D,CAAC;EAEL,CAAC,CACF;AACH","ignoreList":[]}
|
|
@@ -13,7 +13,7 @@ export declare function web(options: ScrubAnimationOptions & AnimationExtraOptio
|
|
|
13
13
|
endOffset: RangeOffset;
|
|
14
14
|
endOffsetAdd: string;
|
|
15
15
|
keyframes: {
|
|
16
|
-
opacity: number;
|
|
16
|
+
opacity: string | number;
|
|
17
17
|
}[];
|
|
18
18
|
id?: string | undefined;
|
|
19
19
|
keyframeEffect?: import("../../types").MotionKeyframeEffect | undefined;
|
|
@@ -45,7 +45,7 @@ export declare function style(options: ScrubAnimationOptions & AnimationExtraOpt
|
|
|
45
45
|
endOffset: RangeOffset;
|
|
46
46
|
endOffsetAdd: string;
|
|
47
47
|
keyframes: {
|
|
48
|
-
opacity: number;
|
|
48
|
+
opacity: string | number;
|
|
49
49
|
}[];
|
|
50
50
|
id?: string | undefined;
|
|
51
51
|
keyframeEffect?: import("../../types").MotionKeyframeEffect | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BgFade.d.ts","sourceRoot":"","sources":["../../../../src/library/backgroundScroll/BgFade.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,MAAM,EACN,WAAW,EACX,qBAAqB,EACrB,qBAAqB,EACtB,MAAM,aAAa,CAAC;AAIrB,wBAAgB,QAAQ,CAAC,CAAC,EAAE,qBAAqB,YAEhD;AAED,wBAAgB,OAAO,CAAC,CAAC,EAAE,qBAAqB,EAAE,GAAG,CAAC,EAAE,MAAM;;;EAS7D;AAED,wBAAgB,GAAG,CACjB,OAAO,EAAE,qBAAqB,GAAG,qBAAqB,EACtD,GAAG,CAAC,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAKb;AAED,wBAAgB,KAAK,CACnB,OAAO,EAAE,qBAAqB,GAAG,qBAAqB,EACtD,KAAK,UAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"BgFade.d.ts","sourceRoot":"","sources":["../../../../src/library/backgroundScroll/BgFade.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,MAAM,EACN,WAAW,EACX,qBAAqB,EACrB,qBAAqB,EACtB,MAAM,aAAa,CAAC;AAIrB,wBAAgB,QAAQ,CAAC,CAAC,EAAE,qBAAqB,YAEhD;AAED,wBAAgB,OAAO,CAAC,CAAC,EAAE,qBAAqB,EAAE,GAAG,CAAC,EAAE,MAAM;;;EAS7D;AAED,wBAAgB,GAAG,CACjB,OAAO,EAAE,qBAAqB,GAAG,qBAAqB,EACtD,GAAG,CAAC,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAKb;AAED,wBAAgB,KAAK,CACnB,OAAO,EAAE,qBAAqB,GAAG,qBAAqB,EACtD,KAAK,UAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAmDd"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wix/motion",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.665.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": "a9411ef4ed38950451cb1bc88ab9187ec2b4489fe4feef60f7204980"
|
|
87
87
|
}
|