@wix/motion 1.644.0 → 1.646.0

package/dist/cjs/playground/animationsMotion.stories.js

@@ -38,7 +38,6 @@ const Entrance = () => {
     // Animate
     animationGroup.current = (0, _motion.getWebAnimation)(el.id, {
       id: '',
-      type: 'TimeAnimationOptions',
       namedEffect: {
         id: '',
         type: name,
@@ -71,7 +70,7 @@ const Entrance = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 91,
+      lineNumber: 90,
       columnNumber: 5
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -79,7 +78,7 @@ const Entrance = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 92,
+      lineNumber: 91,
       columnNumber: 7
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -94,7 +93,7 @@ const Entrance = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 93,
+      lineNumber: 92,
       columnNumber: 9
     }
   }, "Entrance")), /*#__PURE__*/_react.default.createElement("div", {
@@ -102,7 +101,7 @@ const Entrance = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 108,
+      lineNumber: 107,
       columnNumber: 7
     }
   }, /*#__PURE__*/_react.default.createElement(_controls.NumberInput, {
@@ -115,7 +114,7 @@ const Entrance = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 109,
+      lineNumber: 108,
       columnNumber: 9
     }
   }), /*#__PURE__*/_react.default.createElement(_controls.SelectInput, {
@@ -131,7 +130,7 @@ const Entrance = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 117,
+      lineNumber: 116,
       columnNumber: 9
     }
   }), /*#__PURE__*/_react.default.createElement(_controls.SelectInput, {
@@ -146,7 +145,7 @@ const Entrance = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 128,
+      lineNumber: 127,
       columnNumber: 9
     }
   })), /*#__PURE__*/_react.default.createElement("div", {
@@ -154,7 +153,7 @@ const Entrance = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 146,
+      lineNumber: 145,
       columnNumber: 7
     }
   }, Object.entries(schema).sort(([a], [b]) => {
@@ -174,7 +173,7 @@ const Entrance = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 158,
+      lineNumber: 157,
       columnNumber: 13
     }
   }))), /*#__PURE__*/_react.default.createElement("div", {
@@ -182,7 +181,7 @@ const Entrance = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 166,
+      lineNumber: 165,
       columnNumber: 9
     }
   }, /*#__PURE__*/_react.default.createElement("button", {
@@ -191,7 +190,7 @@ const Entrance = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 167,
+      lineNumber: 166,
       columnNumber: 11
     }
   }, "Animate"))));

package/dist/cjs/playground/animationsMotion.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_effectsKit","_controls","_playgroundModule","_playgroundCommon","_motion","_entrance","_jsxFileName","_default","exports","default","title","Entrance","compRef","React","useRef","animationGroup","schemaEditor","setSchemaEditor","useState","useEffect","setData","mapSchemaToDefaultData","animations","animName","Object","fromEntries","getPresets","CONFIG","schemaMapper","entrance","concat","entranceLegacy","map","preset","name","schema","implementedAnimations","keys","defs","filter","animationName","animateText","el","duration","delay","easing","params","_animationGroup$curre","current","cancel","getWebAnimation","id","type","namedEffect","fill","iterations","play","setAnimName","rotation","setRotation","data","handleControlChange","value","currentData","createElement","className","styles","stage","__self","__source","fileName","lineNumber","columnNumber","components","component","ref","style","transform","background","globalControls","NumberInput","label","min","max","step","onChange","event","target","valueAsNumber","SelectInput","options","mainSelect","includes","controls","entries","sort","a","b","controlProps","i","Control","_extends2","key","_e","buttons","animateButton","onClick"],"sources":["../../../src/playground/animationsMotion.stories.tsx"],"sourcesContent":["import React from 'react';\nimport { getPresets, CONFIG } from '@wix/effects-kit';\n\nimport { Control, NumberInput, SelectInput } from './controls';\nimport styles from './playground.module.scss';\nimport { mapSchemaToDefaultData, schemaMapper } from './playground-common';\nimport { getWebAnimation } from '../motion';\nimport { entranceAnimations as defs } from '../library/entrance';\n\nimport type { CSSProperties } from 'react';\nimport type { Meta } from '@wix/yoshi-storybook-dependencies';\nimport type {\n  EffectConfig,\n  OneOfEffects,\n  AllEffectsNames,\n} from '@wix/effects-kit';\nimport type { SchemaEditor } from './playground-common';\nimport type { AnimationGroup } from '../motion';\nimport type { EntranceAnimation } from '../types';\n\nexport default {\n  title: 'Animation Playground/Entrance',\n} as Meta;\n\nexport const Entrance: React.FC<any> = () => {\n  const compRef = React.useRef<HTMLDivElement>(null);\n  const animationGroup = React.useRef<AnimationGroup>();\n  const [schemaEditor, setSchemaEditor] =\n    React.useState<SchemaEditor>('responsive');\n\n  React.useEffect(() => {\n    setData(mapSchemaToDefaultData(animations[animName], schemaEditor));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [schemaEditor]);\n\n  const animations = Object.fromEntries(\n    getPresets(CONFIG[schemaMapper[schemaEditor]].entrance)\n      .concat(getPresets(CONFIG[schemaMapper[schemaEditor]].entranceLegacy))\n      .map((preset) => [preset.name, preset.schema]),\n  ) as Record<AllEffectsNames, EffectConfig<OneOfEffects>['schema']>;\n\n  const implementedAnimations = Object.keys(defs).filter(\n    (animationName) => animations[animationName as AllEffectsNames],\n  ) as AllEffectsNames[];\n\n  function animateText(\n    el: HTMLElement,\n    name: string,\n    { duration = 1000, delay = 0, easing = '', ...params },\n  ) {\n    // Clear\n    animationGroup.current?.cancel();\n\n    // Animate\n    animationGroup.current = getWebAnimation(el.id, {\n      id: '',\n      type: 'TimeAnimationOptions',\n      namedEffect: { id: '', type: name, ...params } as EntranceAnimation,\n      duration,\n      delay,\n      fill: 'backwards',\n      iterations: 1,\n      easing,\n    }) as AnimationGroup;\n    animationGroup.current!.play();\n    // animate(name, el, +duration / 1000, +delay / 1000, {\n    //   ...params,\n    //   callbacks: { onComplete: () => resetAnimation(el, animationGroup.current) },\n    // });\n  }\n\n  const [animName, setAnimName] = React.useState<AllEffectsNames>(\n    implementedAnimations[0],\n  );\n\n  const [rotation, setRotation] = React.useState<number>(0);\n\n  const schema = animations[animName] || {};\n  const [data, setData] = React.useState<Record<string, any>>(\n    mapSchemaToDefaultData(schema),\n  );\n\n  function handleControlChange(name: string, value: any) {\n    setData((currentData) => ({\n      ...currentData,\n      [name]: value,\n    }));\n  }\n\n  return (\n    <div className={styles.stage}>\n      <div className={styles.components}>\n        <div\n          id=\"comp1\"\n          className={styles.component}\n          ref={compRef}\n          style={\n            {\n              '--comp-rotate-z': `${rotation}deg`,\n              transform: `rotateZ(var(--comp-rotate-z, 0deg))`,\n              background: 'teal',\n            } as CSSProperties\n          }\n        >\n          Entrance\n        </div>\n      </div>\n      <div className={styles.globalControls}>\n        <NumberInput\n          label=\"Rotation\"\n          value={rotation}\n          min={0}\n          max={360}\n          step={1}\n          onChange={(event) => setRotation(event.target.valueAsNumber)}\n        />\n        <SelectInput\n          onChange={(event) => {\n            const value = event.target.value;\n            setSchemaEditor(value);\n            // Reset \"power\" when changing editor\n            // handleControlChange('power', undefined);\n          }}\n          value={schemaEditor}\n          options={['desktop', 'mobile', 'responsive']}\n          className={styles.mainSelect}\n        />\n        <SelectInput\n          onChange={(event) => {\n            const value = event.target.value as AllEffectsNames;\n            setAnimName(value);\n            setData(\n              mapSchemaToDefaultData(animations[value] || {}, schemaEditor),\n            );\n          }}\n          value={animName}\n          options={\n            Object.keys(animations).map((name) => [\n              name,\n              implementedAnimations.includes(name as AllEffectsNames),\n            ]) as [string, boolean][]\n          }\n          className={styles.mainSelect}\n        />\n      </div>\n      <div className={styles.controls}>\n        {Object.entries(schema)\n          .sort(([a], [b]) => {\n            if (a === 'duration' || (b !== 'duration' && a === 'delay')) {\n              return -1;\n            }\n            if (b === 'allowReplay') {\n              return -1;\n            }\n            return 0;\n          })\n          .map(([name, controlProps], i) => (\n            <Control\n              key={`key-control-${i}`}\n              {...controlProps}\n              value={data[name]}\n              label={name}\n              onChange={(_e, value) => handleControlChange(name, value)}\n            />\n          ))}\n        <div className={styles.buttons}>\n          <button\n            className={styles.animateButton}\n            onClick={() => animateText(compRef.current!, animName, data)}\n          >\n            Animate\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_effectsKit","_controls","_playgroundModule","_playgroundCommon","_motion","_entrance","_jsxFileName","_default","exports","default","title","Entrance","compRef","React","useRef","animationGroup","schemaEditor","setSchemaEditor","useState","useEffect","setData","mapSchemaToDefaultData","animations","animName","Object","fromEntries","getPresets","CONFIG","schemaMapper","entrance","concat","entranceLegacy","map","preset","name","schema","implementedAnimations","keys","defs","filter","animationName","animateText","el","duration","delay","easing","params","_animationGroup$curre","current","cancel","getWebAnimation","id","namedEffect","type","fill","iterations","play","setAnimName","rotation","setRotation","data","handleControlChange","value","currentData","createElement","className","styles","stage","__self","__source","fileName","lineNumber","columnNumber","components","component","ref","style","transform","background","globalControls","NumberInput","label","min","max","step","onChange","event","target","valueAsNumber","SelectInput","options","mainSelect","includes","controls","entries","sort","a","b","controlProps","i","Control","_extends2","key","_e","buttons","animateButton","onClick"],"sources":["../../../src/playground/animationsMotion.stories.tsx"],"sourcesContent":["import React from 'react';\nimport { getPresets, CONFIG } from '@wix/effects-kit';\n\nimport { Control, NumberInput, SelectInput } from './controls';\nimport styles from './playground.module.scss';\nimport { mapSchemaToDefaultData, schemaMapper } from './playground-common';\nimport { getWebAnimation } from '../motion';\nimport { entranceAnimations as defs } from '../library/entrance';\n\nimport type { CSSProperties } from 'react';\nimport type { Meta } from '@wix/yoshi-storybook-dependencies';\nimport type {\n  EffectConfig,\n  OneOfEffects,\n  AllEffectsNames,\n} from '@wix/effects-kit';\nimport type { SchemaEditor } from './playground-common';\nimport type { AnimationGroup } from '../motion';\nimport type { EntranceAnimation } from '../types';\n\nexport default {\n  title: 'Animation Playground/Entrance',\n} as Meta;\n\nexport const Entrance: React.FC<any> = () => {\n  const compRef = React.useRef<HTMLDivElement>(null);\n  const animationGroup = React.useRef<AnimationGroup>();\n  const [schemaEditor, setSchemaEditor] =\n    React.useState<SchemaEditor>('responsive');\n\n  React.useEffect(() => {\n    setData(mapSchemaToDefaultData(animations[animName], schemaEditor));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [schemaEditor]);\n\n  const animations = Object.fromEntries(\n    getPresets(CONFIG[schemaMapper[schemaEditor]].entrance)\n      .concat(getPresets(CONFIG[schemaMapper[schemaEditor]].entranceLegacy))\n      .map((preset) => [preset.name, preset.schema]),\n  ) as Record<AllEffectsNames, EffectConfig<OneOfEffects>['schema']>;\n\n  const implementedAnimations = Object.keys(defs).filter(\n    (animationName) => animations[animationName as AllEffectsNames],\n  ) as AllEffectsNames[];\n\n  function animateText(\n    el: HTMLElement,\n    name: string,\n    { duration = 1000, delay = 0, easing = '', ...params },\n  ) {\n    // Clear\n    animationGroup.current?.cancel();\n\n    // Animate\n    animationGroup.current = getWebAnimation(el.id, {\n      id: '',\n      namedEffect: { id: '', type: name, ...params } as EntranceAnimation,\n      duration,\n      delay,\n      fill: 'backwards',\n      iterations: 1,\n      easing,\n    }) as AnimationGroup;\n    animationGroup.current!.play();\n    // animate(name, el, +duration / 1000, +delay / 1000, {\n    //   ...params,\n    //   callbacks: { onComplete: () => resetAnimation(el, animationGroup.current) },\n    // });\n  }\n\n  const [animName, setAnimName] = React.useState<AllEffectsNames>(\n    implementedAnimations[0],\n  );\n\n  const [rotation, setRotation] = React.useState<number>(0);\n\n  const schema = animations[animName] || {};\n  const [data, setData] = React.useState<Record<string, any>>(\n    mapSchemaToDefaultData(schema),\n  );\n\n  function handleControlChange(name: string, value: any) {\n    setData((currentData) => ({\n      ...currentData,\n      [name]: value,\n    }));\n  }\n\n  return (\n    <div className={styles.stage}>\n      <div className={styles.components}>\n        <div\n          id=\"comp1\"\n          className={styles.component}\n          ref={compRef}\n          style={\n            {\n              '--comp-rotate-z': `${rotation}deg`,\n              transform: `rotateZ(var(--comp-rotate-z, 0deg))`,\n              background: 'teal',\n            } as CSSProperties\n          }\n        >\n          Entrance\n        </div>\n      </div>\n      <div className={styles.globalControls}>\n        <NumberInput\n          label=\"Rotation\"\n          value={rotation}\n          min={0}\n          max={360}\n          step={1}\n          onChange={(event) => setRotation(event.target.valueAsNumber)}\n        />\n        <SelectInput\n          onChange={(event) => {\n            const value = event.target.value;\n            setSchemaEditor(value);\n            // Reset \"power\" when changing editor\n            // handleControlChange('power', undefined);\n          }}\n          value={schemaEditor}\n          options={['desktop', 'mobile', 'responsive']}\n          className={styles.mainSelect}\n        />\n        <SelectInput\n          onChange={(event) => {\n            const value = event.target.value as AllEffectsNames;\n            setAnimName(value);\n            setData(\n              mapSchemaToDefaultData(animations[value] || {}, schemaEditor),\n            );\n          }}\n          value={animName}\n          options={\n            Object.keys(animations).map((name) => [\n              name,\n              implementedAnimations.includes(name as AllEffectsNames),\n            ]) as [string, boolean][]\n          }\n          className={styles.mainSelect}\n        />\n      </div>\n      <div className={styles.controls}>\n        {Object.entries(schema)\n          .sort(([a], [b]) => {\n            if (a === 'duration' || (b !== 'duration' && a === 'delay')) {\n              return -1;\n            }\n            if (b === 'allowReplay') {\n              return -1;\n            }\n            return 0;\n          })\n          .map(([name, controlProps], i) => (\n            <Control\n              key={`key-control-${i}`}\n              {...controlProps}\n              value={data[name]}\n              label={name}\n              onChange={(_e, value) => handleControlChange(name, value)}\n            />\n          ))}\n        <div className={styles.buttons}>\n          <button\n            className={styles.animateButton}\n            onClick={() => animateText(compRef.current!, animName, data)}\n          >\n            Animate\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/playground/animationsMotionMouse.stories.js

@@ -44,7 +44,6 @@ const MouseParallax = () => {
       const factory = _mouse.mouseAnimations[animName];
       const animate = factory({
         id: '',
-        type: 'ScrubAnimationOptions',
         transitionDuration,
         transitionEasing,
         namedEffect: {
@@ -86,7 +85,7 @@ const MouseParallax = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 126,
+      lineNumber: 125,
       columnNumber: 5
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -94,7 +93,7 @@ const MouseParallax = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 132,
+      lineNumber: 131,
       columnNumber: 7
     }
   }, /*#__PURE__*/_react.default.createElement("select", {
@@ -105,7 +104,7 @@ const MouseParallax = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 133,
+      lineNumber: 132,
       columnNumber: 9
     }
   }, Object.entries(_mouseComponent.COMPONENTS_TYPE).map(([key, value]) => /*#__PURE__*/_react.default.createElement("option", {
@@ -114,7 +113,7 @@ const MouseParallax = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 140,
+      lineNumber: 139,
       columnNumber: 13
     }
   }, value)))), /*#__PURE__*/_react.default.createElement("div", {
@@ -122,7 +121,7 @@ const MouseParallax = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 146,
+      lineNumber: 145,
       columnNumber: 7
     }
   }, Array.from({
@@ -135,7 +134,7 @@ const MouseParallax = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 148,
+      lineNumber: 147,
       columnNumber: 11
     }
   }))), /*#__PURE__*/_react.default.createElement("div", {
@@ -143,7 +142,7 @@ const MouseParallax = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 161,
+      lineNumber: 160,
       columnNumber: 7
     }
   }, /*#__PURE__*/_react.default.createElement(_controls.BooleanInput, {
@@ -153,7 +152,7 @@ const MouseParallax = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 162,
+      lineNumber: 161,
       columnNumber: 9
     }
   }), /*#__PURE__*/_react.default.createElement(_controls.BooleanInput, {
@@ -163,7 +162,7 @@ const MouseParallax = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 167,
+      lineNumber: 166,
       columnNumber: 9
     }
   }), /*#__PURE__*/_react.default.createElement(_controls.NumberInput, {
@@ -176,7 +175,7 @@ const MouseParallax = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 172,
+      lineNumber: 171,
       columnNumber: 9
     }
   }), /*#__PURE__*/_react.default.createElement(_controls.SelectInput, {
@@ -190,7 +189,7 @@ const MouseParallax = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 180,
+      lineNumber: 179,
       columnNumber: 9
     }
   }), /*#__PURE__*/_react.default.createElement(_controls.SelectInput, {
@@ -205,7 +204,7 @@ const MouseParallax = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 189,
+      lineNumber: 188,
       columnNumber: 9
     }
   })), /*#__PURE__*/_react.default.createElement("div", {
@@ -213,7 +212,7 @@ const MouseParallax = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 210,
+      lineNumber: 209,
       columnNumber: 7
     }
   }, Object.entries(schema).sort(([a], [b]) => {
@@ -258,7 +257,7 @@ const MouseParallax = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 248,
+      lineNumber: 247,
       columnNumber: 13
     }
   })))));

package/dist/cjs/playground/animationsMotionMouse.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_effectsKit","_playgroundCommon","_mouseComponent","_playgroundModule","_mouse","_controls","_kuliso","_jsxFileName","_default","exports","default","title","MouseParallax","compRefs","React","useRef","stageRef","pointerRef","multipleComponents","setMultipleComponents","useState","schemaEditor","setSchemaEditor","isDevMode","setIsDevMode","currentComponentType","setCurrentComponentType","COMPONENTS_TYPE","square","animations","Object","fromEntries","getPresets","CONFIG","schemaMapper","mouse","undefined","map","preset","name","schema","implementedAnimations","keys","defs","filter","animationName","animName","setAnimName","rotation","setRotation","data","setData","mapSchemaToDefaultData","useEffect","transitionDuration","transitionEasing","namedEffect","effects","current","element","factory","animate","id","type","scenes","animation","effect","_scene","progress","centeredToTarget","target","Pointer","start","destroy","forEach","_","cancel","handleControlChange","value","currentData","onCompTypeChange","event","createElement","className","styles","stage","mouseStage","ref","__self","__source","fileName","lineNumber","columnNumber","selectWrapper","onChange","entries","key","components","Array","from","length","i","MouseComponent","globalControls","BooleanInput","label","e","checked","NumberInput","min","max","step","valueAsNumber","SelectInput","options","mainSelect","includes","controls","sort","a","b","controlProps","Control","_extends2","_e"],"sources":["../../../src/playground/animationsMotionMouse.stories.tsx"],"sourcesContent":["import React from 'react';\n\nimport {\n  getPresets,\n  CONFIG,\n  MouseEffectConfig,\n  AllEffectsNames,\n  OneOfMouseEffects,\n} from '@wix/effects-kit';\n\nimport {\n  mapSchemaToDefaultData,\n  SchemaEditor,\n  schemaMapper,\n} from './playground-common';\n\nimport { MouseComponent, COMPONENTS_TYPE } from './mouseComponent';\nimport styles from './playground.module.scss';\nimport { mouseAnimations as defs } from '../library/mouse';\n\nimport type { ChangeEvent } from 'react';\nimport type { Meta } from '@wix/yoshi-storybook-dependencies';\nimport type { MouseComponentType } from './mouseComponent';\nimport { NumberInput, SelectInput, BooleanInput, Control } from './controls';\nimport { Pointer } from 'kuliso';\nimport {\n  MouseAnimationInstance,\n  Progress,\n  ScrubAnimationOptions,\n} from '../types';\n\nexport default {\n  title: 'Animation Playground/Mouse Parallax',\n} as Meta;\n\nexport const MouseParallax: React.FC<any> = () => {\n  const compRefs = React.useRef<HTMLElement[]>([]);\n  const stageRef = React.useRef<HTMLDivElement>(null);\n  const pointerRef = React.useRef<typeof Pointer>(null);\n  const [multipleComponents, setMultipleComponents] = React.useState(false);\n\n  const [schemaEditor, setSchemaEditor] =\n    React.useState<SchemaEditor>('responsive');\n\n  const [isDevMode, setIsDevMode] = React.useState<boolean>(false);\n  const [currentComponentType, setCurrentComponentType] =\n    React.useState<MouseComponentType>(COMPONENTS_TYPE.square);\n\n  const animations = Object.fromEntries(\n    getPresets(\n      CONFIG[schemaMapper[schemaEditor]].mouse,\n      undefined,\n      isDevMode,\n    ).map((preset) => [preset.name, preset.schema]),\n  ) as Record<AllEffectsNames, MouseEffectConfig<OneOfMouseEffects>['schema']>;\n\n  const implementedAnimations = Object.keys(defs).filter(\n    (animationName) => animations[animationName as keyof typeof defs],\n  ) as AllEffectsNames[];\n\n  const [animName, setAnimName] = React.useState<keyof typeof defs>(\n    implementedAnimations[0] as keyof typeof defs,\n  );\n\n  const [rotation, setRotation] = React.useState<number>(0);\n\n  const schema = animations[animName] || {};\n  const [data, setData] = React.useState<Record<string, any>>(\n    mapSchemaToDefaultData(schema, schemaEditor),\n  );\n\n  React.useEffect(() => {\n    setData(mapSchemaToDefaultData(animations[animName], schemaEditor));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [schemaEditor]);\n\n  React.useEffect(() => {\n    const { transitionDuration, transitionEasing, ...namedEffect } = data;\n    const effects = compRefs.current.map((element) => {\n      const factory = defs[animName]!;\n      const animate = factory({\n        id: '',\n        type: 'ScrubAnimationOptions',\n        transitionDuration,\n        transitionEasing,\n        namedEffect: {\n          id: '',\n          type: animName,\n          ...namedEffect,\n        },\n      } as ScrubAnimationOptions);\n      return [element, animate(element)];\n    }) as [HTMLElement, MouseAnimationInstance][];\n    const scenes = effects.map(([element, animation]) => {\n      return {\n        effect: (_scene: any, progress: Progress) =>\n          animation.progress(progress),\n        centeredToTarget: true,\n        target: element,\n      };\n    });\n\n    pointerRef.current = new Pointer({ scenes });\n    pointerRef.current.start();\n\n    return () => {\n      pointerRef.current.destroy();\n      effects.forEach(([_, animation]) => animation.cancel());\n    };\n  }, [animName, data, rotation, multipleComponents, currentComponentType]);\n\n  function handleControlChange(name: string, value: any) {\n    setData((currentData) => ({\n      ...currentData,\n      [name]: value,\n    }));\n  }\n\n  function onCompTypeChange(event: ChangeEvent) {\n    setCurrentComponentType(\n      (event.target as HTMLSelectElement).value as MouseComponentType,\n    );\n  }\n\n  return (\n    <div\n      className={`${styles.stage} ${styles.mouseStage} ${\n        multipleComponents ? styles.multipleComponents : ''\n      }`}\n      ref={stageRef}\n    >\n      <div className={styles.selectWrapper}>\n        <select\n          name=\"compType\"\n          id=\"compType\"\n          onChange={onCompTypeChange}\n          value={currentComponentType}\n        >\n          {Object.entries(COMPONENTS_TYPE).map(([key, value]) => (\n            <option key={`comp${key}`} value={value}>\n              {value}\n            </option>\n          ))}\n        </select>\n      </div>\n      <div className={`${styles.components}`}>\n        {Array.from({ length: multipleComponents ? 12 : 1 }).map((_, i) => (\n          <MouseComponent\n            type={currentComponentType}\n            ref={(ref: HTMLElement | null) =>\n              multipleComponents\n                ? (compRefs.current[i] = ref!)\n                : (compRefs.current = [ref!])\n            }\n            rotation={rotation}\n            key={multipleComponents ? `copm-${i}` : 'comp-single'}\n          />\n        ))}\n      </div>\n\n      <div className={styles.globalControls}>\n        <BooleanInput\n          label=\"Multiple Components\"\n          value={multipleComponents}\n          onChange={(e) => setMultipleComponents(e.target.checked)}\n        />\n        <BooleanInput\n          label=\"Show hidden animations\"\n          value={isDevMode}\n          onChange={(e) => setIsDevMode(e.target.checked)}\n        />\n        <NumberInput\n          label=\"Rotation\"\n          value={rotation}\n          min={0}\n          max={360}\n          step={1}\n          onChange={(event) => setRotation(event.target.valueAsNumber)}\n        />\n        <SelectInput\n          onChange={(event) => {\n            const value: SchemaEditor = event.target.value;\n            setSchemaEditor(value);\n          }}\n          value={schemaEditor}\n          options={['desktop', 'mobile', 'responsive']}\n          className={styles.mainSelect}\n        />\n        <SelectInput\n          onChange={(event) => {\n            const value = event.target.value;\n            setAnimName(value);\n            setData(\n              mapSchemaToDefaultData(\n                animations[value as AllEffectsNames] || {},\n                schemaEditor,\n              ),\n            );\n          }}\n          value={animName}\n          options={\n            Object.keys(animations).map((name) => [\n              name,\n              implementedAnimations.includes(name as AllEffectsNames),\n            ]) as [string, boolean][]\n          }\n          className={styles.mainSelect}\n        />\n      </div>\n      <div className={styles.controls}>\n        {Object.entries(schema)\n          .sort(([a], [b]) => {\n            // sort order: last is 'inverted', one before last is 'transitionEasing', one before that is 'transitionDuration', then 'axis' or 'direction', the rest is sorted alphabetically\n            if (a === 'inverted') {\n              return 1;\n            }\n            if (b === 'inverted') {\n              return -1;\n            }\n            if (a === 'transitionEasing') {\n              return 1;\n            }\n            if (b === 'transitionEasing') {\n              return -1;\n            }\n            if (a === 'transitionDuration') {\n              return 1;\n            }\n            if (b === 'transitionDuration') {\n              return -1;\n            }\n            if (a === 'axis' || a === 'direction') {\n              return 1;\n            }\n            if (b === 'axis' || b === 'direction') {\n              return -1;\n            }\n            if (a > b) {\n              return 1;\n            }\n            if (a < b) {\n              return -1;\n            }\n\n            return 0;\n          })\n          .map(([name, controlProps], i) => (\n            <Control\n              key={`key-control-${i}`}\n              {...controlProps}\n              value={data[name]}\n              label={name}\n              onChange={(_e, value) => handleControlChange(name, value)}\n            />\n          ))}\n        {/* <div className={styles.buttons}>\n          <button\n            className={styles.animateButton}\n            onClick={() => animateText(compRef.current!, animName, data)}\n          >\n            Animate\n          </button>\n        </div> */}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_effectsKit","_playgroundCommon","_mouseComponent","_playgroundModule","_mouse","_controls","_kuliso","_jsxFileName","_default","exports","default","title","MouseParallax","compRefs","React","useRef","stageRef","pointerRef","multipleComponents","setMultipleComponents","useState","schemaEditor","setSchemaEditor","isDevMode","setIsDevMode","currentComponentType","setCurrentComponentType","COMPONENTS_TYPE","square","animations","Object","fromEntries","getPresets","CONFIG","schemaMapper","mouse","undefined","map","preset","name","schema","implementedAnimations","keys","defs","filter","animationName","animName","setAnimName","rotation","setRotation","data","setData","mapSchemaToDefaultData","useEffect","transitionDuration","transitionEasing","namedEffect","effects","current","element","factory","animate","id","type","scenes","animation","effect","_scene","progress","centeredToTarget","target","Pointer","start","destroy","forEach","_","cancel","handleControlChange","value","currentData","onCompTypeChange","event","createElement","className","styles","stage","mouseStage","ref","__self","__source","fileName","lineNumber","columnNumber","selectWrapper","onChange","entries","key","components","Array","from","length","i","MouseComponent","globalControls","BooleanInput","label","e","checked","NumberInput","min","max","step","valueAsNumber","SelectInput","options","mainSelect","includes","controls","sort","a","b","controlProps","Control","_extends2","_e"],"sources":["../../../src/playground/animationsMotionMouse.stories.tsx"],"sourcesContent":["import React from 'react';\n\nimport {\n  getPresets,\n  CONFIG,\n  MouseEffectConfig,\n  AllEffectsNames,\n  OneOfMouseEffects,\n} from '@wix/effects-kit';\n\nimport {\n  mapSchemaToDefaultData,\n  SchemaEditor,\n  schemaMapper,\n} from './playground-common';\n\nimport { MouseComponent, COMPONENTS_TYPE } from './mouseComponent';\nimport styles from './playground.module.scss';\nimport { mouseAnimations as defs } from '../library/mouse';\n\nimport type { ChangeEvent } from 'react';\nimport type { Meta } from '@wix/yoshi-storybook-dependencies';\nimport type { MouseComponentType } from './mouseComponent';\nimport { NumberInput, SelectInput, BooleanInput, Control } from './controls';\nimport { Pointer } from 'kuliso';\nimport {\n  MouseAnimationInstance,\n  Progress,\n  ScrubAnimationOptions,\n} from '../types';\n\nexport default {\n  title: 'Animation Playground/Mouse Parallax',\n} as Meta;\n\nexport const MouseParallax: React.FC<any> = () => {\n  const compRefs = React.useRef<HTMLElement[]>([]);\n  const stageRef = React.useRef<HTMLDivElement>(null);\n  const pointerRef = React.useRef<typeof Pointer>(null);\n  const [multipleComponents, setMultipleComponents] = React.useState(false);\n\n  const [schemaEditor, setSchemaEditor] =\n    React.useState<SchemaEditor>('responsive');\n\n  const [isDevMode, setIsDevMode] = React.useState<boolean>(false);\n  const [currentComponentType, setCurrentComponentType] =\n    React.useState<MouseComponentType>(COMPONENTS_TYPE.square);\n\n  const animations = Object.fromEntries(\n    getPresets(\n      CONFIG[schemaMapper[schemaEditor]].mouse,\n      undefined,\n      isDevMode,\n    ).map((preset) => [preset.name, preset.schema]),\n  ) as Record<AllEffectsNames, MouseEffectConfig<OneOfMouseEffects>['schema']>;\n\n  const implementedAnimations = Object.keys(defs).filter(\n    (animationName) => animations[animationName as keyof typeof defs],\n  ) as AllEffectsNames[];\n\n  const [animName, setAnimName] = React.useState<keyof typeof defs>(\n    implementedAnimations[0] as keyof typeof defs,\n  );\n\n  const [rotation, setRotation] = React.useState<number>(0);\n\n  const schema = animations[animName] || {};\n  const [data, setData] = React.useState<Record<string, any>>(\n    mapSchemaToDefaultData(schema, schemaEditor),\n  );\n\n  React.useEffect(() => {\n    setData(mapSchemaToDefaultData(animations[animName], schemaEditor));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [schemaEditor]);\n\n  React.useEffect(() => {\n    const { transitionDuration, transitionEasing, ...namedEffect } = data;\n    const effects = compRefs.current.map((element) => {\n      const factory = defs[animName]!;\n      const animate = factory({\n        id: '',\n        transitionDuration,\n        transitionEasing,\n        namedEffect: {\n          id: '',\n          type: animName,\n          ...namedEffect,\n        },\n      } as ScrubAnimationOptions);\n      return [element, animate(element)];\n    }) as [HTMLElement, MouseAnimationInstance][];\n    const scenes = effects.map(([element, animation]) => {\n      return {\n        effect: (_scene: any, progress: Progress) =>\n          animation.progress(progress),\n        centeredToTarget: true,\n        target: element,\n      };\n    });\n\n    pointerRef.current = new Pointer({ scenes });\n    pointerRef.current.start();\n\n    return () => {\n      pointerRef.current.destroy();\n      effects.forEach(([_, animation]) => animation.cancel());\n    };\n  }, [animName, data, rotation, multipleComponents, currentComponentType]);\n\n  function handleControlChange(name: string, value: any) {\n    setData((currentData) => ({\n      ...currentData,\n      [name]: value,\n    }));\n  }\n\n  function onCompTypeChange(event: ChangeEvent) {\n    setCurrentComponentType(\n      (event.target as HTMLSelectElement).value as MouseComponentType,\n    );\n  }\n\n  return (\n    <div\n      className={`${styles.stage} ${styles.mouseStage} ${\n        multipleComponents ? styles.multipleComponents : ''\n      }`}\n      ref={stageRef}\n    >\n      <div className={styles.selectWrapper}>\n        <select\n          name=\"compType\"\n          id=\"compType\"\n          onChange={onCompTypeChange}\n          value={currentComponentType}\n        >\n          {Object.entries(COMPONENTS_TYPE).map(([key, value]) => (\n            <option key={`comp${key}`} value={value}>\n              {value}\n            </option>\n          ))}\n        </select>\n      </div>\n      <div className={`${styles.components}`}>\n        {Array.from({ length: multipleComponents ? 12 : 1 }).map((_, i) => (\n          <MouseComponent\n            type={currentComponentType}\n            ref={(ref: HTMLElement | null) =>\n              multipleComponents\n                ? (compRefs.current[i] = ref!)\n                : (compRefs.current = [ref!])\n            }\n            rotation={rotation}\n            key={multipleComponents ? `copm-${i}` : 'comp-single'}\n          />\n        ))}\n      </div>\n\n      <div className={styles.globalControls}>\n        <BooleanInput\n          label=\"Multiple Components\"\n          value={multipleComponents}\n          onChange={(e) => setMultipleComponents(e.target.checked)}\n        />\n        <BooleanInput\n          label=\"Show hidden animations\"\n          value={isDevMode}\n          onChange={(e) => setIsDevMode(e.target.checked)}\n        />\n        <NumberInput\n          label=\"Rotation\"\n          value={rotation}\n          min={0}\n          max={360}\n          step={1}\n          onChange={(event) => setRotation(event.target.valueAsNumber)}\n        />\n        <SelectInput\n          onChange={(event) => {\n            const value: SchemaEditor = event.target.value;\n            setSchemaEditor(value);\n          }}\n          value={schemaEditor}\n          options={['desktop', 'mobile', 'responsive']}\n          className={styles.mainSelect}\n        />\n        <SelectInput\n          onChange={(event) => {\n            const value = event.target.value;\n            setAnimName(value);\n            setData(\n              mapSchemaToDefaultData(\n                animations[value as AllEffectsNames] || {},\n                schemaEditor,\n              ),\n            );\n          }}\n          value={animName}\n          options={\n            Object.keys(animations).map((name) => [\n              name,\n              implementedAnimations.includes(name as AllEffectsNames),\n            ]) as [string, boolean][]\n          }\n          className={styles.mainSelect}\n        />\n      </div>\n      <div className={styles.controls}>\n        {Object.entries(schema)\n          .sort(([a], [b]) => {\n            // sort order: last is 'inverted', one before last is 'transitionEasing', one before that is 'transitionDuration', then 'axis' or 'direction', the rest is sorted alphabetically\n            if (a === 'inverted') {\n              return 1;\n            }\n            if (b === 'inverted') {\n              return -1;\n            }\n            if (a === 'transitionEasing') {\n              return 1;\n            }\n            if (b === 'transitionEasing') {\n              return -1;\n            }\n            if (a === 'transitionDuration') {\n              return 1;\n            }\n            if (b === 'transitionDuration') {\n              return -1;\n            }\n            if (a === 'axis' || a === 'direction') {\n              return 1;\n            }\n            if (b === 'axis' || b === 'direction') {\n              return -1;\n            }\n            if (a > b) {\n              return 1;\n            }\n            if (a < b) {\n              return -1;\n            }\n\n            return 0;\n          })\n          .map(([name, controlProps], i) => (\n            <Control\n              key={`key-control-${i}`}\n              {...controlProps}\n              value={data[name]}\n              label={name}\n              onChange={(_e, value) => handleControlChange(name, value)}\n            />\n          ))}\n        {/* <div className={styles.buttons}>\n          <button\n            className={styles.animateButton}\n            onClick={() => animateText(compRef.current!, animName, data)}\n          >\n            Animate\n          </button>\n        </div> */}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/playground/animationsMotionOngoing.stories.js

@@ -42,7 +42,6 @@ const Ongoing = () => {
     // Animate
     animationGroup.current = (0, _motion.getWebAnimation)(el.id, {
       id: '',
-      type: 'TimeAnimationOptions',
       namedEffect: {
         id: '',
         type: name,
@@ -69,7 +68,7 @@ const Ongoing = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 91,
+      lineNumber: 90,
       columnNumber: 5
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -77,7 +76,7 @@ const Ongoing = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 92,
+      lineNumber: 91,
       columnNumber: 7
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -92,7 +91,7 @@ const Ongoing = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 93,
+      lineNumber: 92,
       columnNumber: 9
     }
   }, "Ongoing")), /*#__PURE__*/_react.default.createElement("div", {
@@ -100,7 +99,7 @@ const Ongoing = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 109,
+      lineNumber: 108,
       columnNumber: 7
     }
   }, /*#__PURE__*/_react.default.createElement(_controls.NumberInput, {
@@ -113,7 +112,7 @@ const Ongoing = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 110,
+      lineNumber: 109,
       columnNumber: 9
     }
   }), /*#__PURE__*/_react.default.createElement(_controls.SelectInput, {
@@ -127,7 +126,7 @@ const Ongoing = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 118,
+      lineNumber: 117,
       columnNumber: 9
     }
   }), /*#__PURE__*/_react.default.createElement(_controls.SelectInput, {
@@ -142,7 +141,7 @@ const Ongoing = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 127,
+      lineNumber: 126,
       columnNumber: 9
     }
   })), /*#__PURE__*/_react.default.createElement("div", {
@@ -150,7 +149,7 @@ const Ongoing = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 148,
+      lineNumber: 147,
       columnNumber: 7
     }
   }, Object.entries(schema).sort(([a], [b]) => {
@@ -170,7 +169,7 @@ const Ongoing = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 160,
+      lineNumber: 159,
       columnNumber: 13
     }
   }))), /*#__PURE__*/_react.default.createElement("div", {
@@ -178,7 +177,7 @@ const Ongoing = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 168,
+      lineNumber: 167,
       columnNumber: 9
     }
   }, /*#__PURE__*/_react.default.createElement("button", {
@@ -187,7 +186,7 @@ const Ongoing = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 169,
+      lineNumber: 168,
       columnNumber: 11
     }
   }, "Animate"))));

package/dist/cjs/playground/animationsMotionOngoing.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_effectsKit","_controls","_playgroundModule","_playgroundCommon","_ongoing","_motion","_jsxFileName","_default","exports","default","title","Ongoing","compRef","React","useRef","animationGroup","schemaEditor","setSchemaEditor","useState","animations","Object","fromEntries","getPresets","CONFIG","schemaMapper","ongoing","undefined","map","preset","name","schema","implementedAnimations","keys","defs","filter","animationName","animName","setAnimName","rotation","setRotation","data","setData","mapSchemaToDefaultData","useEffect","animateText","el","duration","delay","easing","params","_animationGroup$curre","current","cancel","getWebAnimation","id","type","namedEffect","iterations","play","handleControlChange","value","currentData","document","body","dataset","blockLevelContainer","createElement","className","styles","stage","__self","__source","fileName","lineNumber","columnNumber","components","component","ref","style","background","globalControls","NumberInput","label","min","max","step","onChange","event","target","valueAsNumber","SelectInput","options","mainSelect","includes","controls","entries","sort","a","b","controlProps","i","Control","_extends2","key","_e","buttons","animateButton","onClick"],"sources":["../../../src/playground/animationsMotionOngoing.stories.tsx"],"sourcesContent":["import React from 'react';\nimport { getPresets, CONFIG } from '@wix/effects-kit';\n\nimport { Control, NumberInput, SelectInput } from './controls';\nimport styles from './playground.module.scss';\nimport { mapSchemaToDefaultData, schemaMapper } from './playground-common';\n\nimport type { CSSProperties } from 'react';\nimport type { SchemaEditor } from './playground-common';\nimport type { Meta } from '@wix/yoshi-storybook-dependencies';\nimport type {\n  EffectConfig,\n  OneOfEffects,\n  AllEffectsNames,\n} from '@wix/effects-kit';\nimport { ongoingAnimations as defs } from '../library/ongoing';\nimport { getWebAnimation } from '../motion';\nimport type { AnimationGroup } from '../motion';\nimport { OngoingAnimation } from '../types';\nimport { cssEasings as easings } from '../easings';\n\nexport default {\n  title: 'Animation Playground/Ongoing',\n} as Meta;\n\nexport const Ongoing: React.FC<any> = () => {\n  const compRef = React.useRef<HTMLDivElement>(null);\n  const animationGroup = React.useRef<AnimationGroup>();\n\n  const [schemaEditor, setSchemaEditor] =\n    React.useState<SchemaEditor>('responsive');\n\n  const animations = Object.fromEntries(\n    getPresets(CONFIG[schemaMapper[schemaEditor]].ongoing, undefined, true).map(\n      (preset) => [preset.name, preset.schema],\n    ),\n  ) as Record<AllEffectsNames, EffectConfig<OneOfEffects>['schema']>;\n  const implementedAnimations = Object.keys(defs).filter(\n    (animationName) => animations[animationName as AllEffectsNames],\n  ) as AllEffectsNames[];\n\n  const [animName, setAnimName] = React.useState<AllEffectsNames>(\n    implementedAnimations[0],\n  );\n\n  const [rotation, setRotation] = React.useState<number>(0);\n\n  const schema = animations[animName] || {};\n  const [data, setData] = React.useState<Record<string, any>>(\n    mapSchemaToDefaultData(schema, schemaEditor),\n  );\n\n  React.useEffect(() => {\n    setData(mapSchemaToDefaultData(animations[animName], schemaEditor));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [schemaEditor]);\n\n  function animateText(\n    el: HTMLElement & { _gsap?: any },\n    name: string,\n    { duration = 1000, delay = 0, easing = 'linear', ...params },\n  ) {\n    // Clear\n    animationGroup.current?.cancel();\n\n    // Animate\n    animationGroup.current = getWebAnimation(el.id, {\n      id: '',\n      type: 'TimeAnimationOptions',\n      namedEffect: { id: '', type: name, ...params } as OngoingAnimation,\n      easing: easing as keyof typeof easings,\n      duration,\n      delay,\n      iterations: 10,\n    }) as AnimationGroup;\n    animationGroup.current.play();\n  }\n\n  function handleControlChange(name: string, value: any) {\n    setData((currentData) => ({\n      ...currentData,\n      [name]: value,\n    }));\n  }\n\n  React.useEffect(() => {\n    document.body!.dataset.blockLevelContainer = 'root';\n  }, []);\n\n  return (\n    <div className={styles.stage}>\n      <div className={styles.components}>\n        <div\n          id=\"comp1\"\n          className={styles.component}\n          ref={compRef}\n          style={\n            {\n              '--comp-rotate-z': `${rotation}deg`,\n              '--rotation': `${rotation}deg`,\n              background: 'forestgreen',\n            } as CSSProperties\n          }\n        >\n          Ongoing\n        </div>\n      </div>\n\n      <div className={styles.globalControls}>\n        <NumberInput\n          label=\"Rotation\"\n          value={rotation}\n          min={0}\n          max={360}\n          step={1}\n          onChange={(event) => setRotation(event.target.valueAsNumber)}\n        />\n        <SelectInput\n          onChange={(event) => {\n            const value: SchemaEditor = event.target.value;\n            setSchemaEditor(value);\n          }}\n          value={schemaEditor}\n          options={['desktop', 'mobile', 'responsive']}\n          className={styles.mainSelect}\n        />\n        <SelectInput\n          onChange={(event) => {\n            const value = event.target.value;\n            setAnimName(value);\n            setData(\n              mapSchemaToDefaultData(\n                animations[value as AllEffectsNames] || {},\n                schemaEditor,\n              ),\n            );\n          }}\n          value={animName}\n          options={\n            Object.keys(animations).map((name) => [\n              name,\n              implementedAnimations.includes(name as AllEffectsNames),\n            ]) as [string, boolean][]\n          }\n          className={styles.mainSelect}\n        />\n      </div>\n      <div className={styles.controls}>\n        {Object.entries(schema)\n          .sort(([a], [b]) => {\n            if (a === 'duration' || (b !== 'duration' && a === 'delay')) {\n              return -1;\n            }\n            if (b === 'allowReplay') {\n              return -1;\n            }\n            return 0;\n          })\n          .map(([name, controlProps], i) => (\n            <Control\n              key={`key-control-${i}`}\n              {...controlProps}\n              value={data[name]}\n              label={name}\n              onChange={(_e, value) => handleControlChange(name, value)}\n            />\n          ))}\n        <div className={styles.buttons}>\n          <button\n            className={styles.animateButton}\n            onClick={() => animateText(compRef.current!, animName, data)}\n          >\n            Animate\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_effectsKit","_controls","_playgroundModule","_playgroundCommon","_ongoing","_motion","_jsxFileName","_default","exports","default","title","Ongoing","compRef","React","useRef","animationGroup","schemaEditor","setSchemaEditor","useState","animations","Object","fromEntries","getPresets","CONFIG","schemaMapper","ongoing","undefined","map","preset","name","schema","implementedAnimations","keys","defs","filter","animationName","animName","setAnimName","rotation","setRotation","data","setData","mapSchemaToDefaultData","useEffect","animateText","el","duration","delay","easing","params","_animationGroup$curre","current","cancel","getWebAnimation","id","namedEffect","type","iterations","play","handleControlChange","value","currentData","document","body","dataset","blockLevelContainer","createElement","className","styles","stage","__self","__source","fileName","lineNumber","columnNumber","components","component","ref","style","background","globalControls","NumberInput","label","min","max","step","onChange","event","target","valueAsNumber","SelectInput","options","mainSelect","includes","controls","entries","sort","a","b","controlProps","i","Control","_extends2","key","_e","buttons","animateButton","onClick"],"sources":["../../../src/playground/animationsMotionOngoing.stories.tsx"],"sourcesContent":["import React from 'react';\nimport { getPresets, CONFIG } from '@wix/effects-kit';\n\nimport { Control, NumberInput, SelectInput } from './controls';\nimport styles from './playground.module.scss';\nimport { mapSchemaToDefaultData, schemaMapper } from './playground-common';\n\nimport type { CSSProperties } from 'react';\nimport type { SchemaEditor } from './playground-common';\nimport type { Meta } from '@wix/yoshi-storybook-dependencies';\nimport type {\n  EffectConfig,\n  OneOfEffects,\n  AllEffectsNames,\n} from '@wix/effects-kit';\nimport { ongoingAnimations as defs } from '../library/ongoing';\nimport { getWebAnimation } from '../motion';\nimport type { AnimationGroup } from '../motion';\nimport { OngoingAnimation } from '../types';\nimport { cssEasings as easings } from '../easings';\n\nexport default {\n  title: 'Animation Playground/Ongoing',\n} as Meta;\n\nexport const Ongoing: React.FC<any> = () => {\n  const compRef = React.useRef<HTMLDivElement>(null);\n  const animationGroup = React.useRef<AnimationGroup>();\n\n  const [schemaEditor, setSchemaEditor] =\n    React.useState<SchemaEditor>('responsive');\n\n  const animations = Object.fromEntries(\n    getPresets(CONFIG[schemaMapper[schemaEditor]].ongoing, undefined, true).map(\n      (preset) => [preset.name, preset.schema],\n    ),\n  ) as Record<AllEffectsNames, EffectConfig<OneOfEffects>['schema']>;\n  const implementedAnimations = Object.keys(defs).filter(\n    (animationName) => animations[animationName as AllEffectsNames],\n  ) as AllEffectsNames[];\n\n  const [animName, setAnimName] = React.useState<AllEffectsNames>(\n    implementedAnimations[0],\n  );\n\n  const [rotation, setRotation] = React.useState<number>(0);\n\n  const schema = animations[animName] || {};\n  const [data, setData] = React.useState<Record<string, any>>(\n    mapSchemaToDefaultData(schema, schemaEditor),\n  );\n\n  React.useEffect(() => {\n    setData(mapSchemaToDefaultData(animations[animName], schemaEditor));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [schemaEditor]);\n\n  function animateText(\n    el: HTMLElement & { _gsap?: any },\n    name: string,\n    { duration = 1000, delay = 0, easing = 'linear', ...params },\n  ) {\n    // Clear\n    animationGroup.current?.cancel();\n\n    // Animate\n    animationGroup.current = getWebAnimation(el.id, {\n      id: '',\n      namedEffect: { id: '', type: name, ...params } as OngoingAnimation,\n      easing: easing as keyof typeof easings,\n      duration,\n      delay,\n      iterations: 10,\n    }) as AnimationGroup;\n    animationGroup.current.play();\n  }\n\n  function handleControlChange(name: string, value: any) {\n    setData((currentData) => ({\n      ...currentData,\n      [name]: value,\n    }));\n  }\n\n  React.useEffect(() => {\n    document.body!.dataset.blockLevelContainer = 'root';\n  }, []);\n\n  return (\n    <div className={styles.stage}>\n      <div className={styles.components}>\n        <div\n          id=\"comp1\"\n          className={styles.component}\n          ref={compRef}\n          style={\n            {\n              '--comp-rotate-z': `${rotation}deg`,\n              '--rotation': `${rotation}deg`,\n              background: 'forestgreen',\n            } as CSSProperties\n          }\n        >\n          Ongoing\n        </div>\n      </div>\n\n      <div className={styles.globalControls}>\n        <NumberInput\n          label=\"Rotation\"\n          value={rotation}\n          min={0}\n          max={360}\n          step={1}\n          onChange={(event) => setRotation(event.target.valueAsNumber)}\n        />\n        <SelectInput\n          onChange={(event) => {\n            const value: SchemaEditor = event.target.value;\n            setSchemaEditor(value);\n          }}\n          value={schemaEditor}\n          options={['desktop', 'mobile', 'responsive']}\n          className={styles.mainSelect}\n        />\n        <SelectInput\n          onChange={(event) => {\n            const value = event.target.value;\n            setAnimName(value);\n            setData(\n              mapSchemaToDefaultData(\n                animations[value as AllEffectsNames] || {},\n                schemaEditor,\n              ),\n            );\n          }}\n          value={animName}\n          options={\n            Object.keys(animations).map((name) => [\n              name,\n              implementedAnimations.includes(name as AllEffectsNames),\n            ]) as [string, boolean][]\n          }\n          className={styles.mainSelect}\n        />\n      </div>\n      <div className={styles.controls}>\n        {Object.entries(schema)\n          .sort(([a], [b]) => {\n            if (a === 'duration' || (b !== 'duration' && a === 'delay')) {\n              return -1;\n            }\n            if (b === 'allowReplay') {\n              return -1;\n            }\n            return 0;\n          })\n          .map(([name, controlProps], i) => (\n            <Control\n              key={`key-control-${i}`}\n              {...controlProps}\n              value={data[name]}\n              label={name}\n              onChange={(_e, value) => handleControlChange(name, value)}\n            />\n          ))}\n        <div className={styles.buttons}>\n          <button\n            className={styles.animateButton}\n            onClick={() => animateText(compRef.current!, animName, data)}\n          >\n            Animate\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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","ignoreList":[]}