@wix/motion 1.644.0 → 1.646.0

package/dist/esm/library/ongoing/test/testUtils.js.map

@@ -1 +1 @@
-{"version":3,"names":["baseMockOptions","id","type"],"sources":["../../../../../src/library/ongoing/test/testUtils.ts"],"sourcesContent":["import { TimeAnimationOptions } from '../../../types';\n\nexport const baseMockOptions: TimeAnimationOptions = {\n  id: 'test-id',\n  type: 'TimeAnimationOptions',\n};\n"],"mappings":"AAEA,OAAO,MAAMA,eAAqC,GAAG;EACnDC,EAAE,EAAE,SAAS;EACbC,IAAI,EAAE;AACR,CAAC","ignoreList":[]}
+{"version":3,"names":["baseMockOptions","id"],"sources":["../../../../../src/library/ongoing/test/testUtils.ts"],"sourcesContent":["import { TimeAnimationOptions } from '../../../types';\n\nexport const baseMockOptions: TimeAnimationOptions = {\n  id: 'test-id',\n};\n"],"mappings":"AAEA,OAAO,MAAMA,eAAqC,GAAG;EACnDC,EAAE,EAAE;AACN,CAAC","ignoreList":[]}

package/dist/esm/library/scroll/test/testUtils.js

@@ -1,5 +1,4 @@
 export const baseMockOptions = {
-  id: 'test-id',
-  type: 'ScrubAnimationOptions'
+  id: 'test-id'
 };
 //# sourceMappingURL=testUtils.js.map

package/dist/esm/library/scroll/test/testUtils.js.map

@@ -1 +1 @@
-{"version":3,"names":["baseMockOptions","id","type"],"sources":["../../../../../src/library/scroll/test/testUtils.ts"],"sourcesContent":["import { ScrubAnimationOptions } from '../../../types';\n\nexport const baseMockOptions: ScrubAnimationOptions = {\n  id: 'test-id',\n  type: 'ScrubAnimationOptions',\n};\n"],"mappings":"AAEA,OAAO,MAAMA,eAAsC,GAAG;EACpDC,EAAE,EAAE,SAAS;EACbC,IAAI,EAAE;AACR,CAAC","ignoreList":[]}
+{"version":3,"names":["baseMockOptions","id"],"sources":["../../../../../src/library/scroll/test/testUtils.ts"],"sourcesContent":["import { ScrubAnimationOptions } from '../../../types';\n\nexport const baseMockOptions: ScrubAnimationOptions = {\n  id: 'test-id',\n};\n"],"mappings":"AAEA,OAAO,MAAMA,eAAsC,GAAG;EACpDC,EAAE,EAAE;AACN,CAAC","ignoreList":[]}

package/dist/esm/playground/animationMotionBgScroll.stories.js

@@ -120,7 +120,6 @@ export const BackgroundScroll = () => {
       (_animationGroup = animationGroup) == null || _animationGroup.cancel();
       animationGroup = getWebAnimation(el.id, {
         id: '',
-        type: 'ScrubAnimationOptions',
         namedEffect: {
           id: '',
           type: name,
@@ -141,7 +140,6 @@ export const BackgroundScroll = () => {
       var _scroll;
       animationScene = getScrubScene(el.id, {
         id: '',
-        type: 'ScrubAnimationOptions',
         namedEffect: {
           id: '',
           type: name,

package/dist/esm/playground/animationMotionBgScroll.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Scroll","ScrollLib","getWebAnimation","getScrubScene","Control","SelectInput","styles","backgroundScrollAnimations","defs","mapSchemaToDefaultData","schemaMapper","getPresets","CONFIG","title","effectToClassMap","BgParallax","bgParallax","BgReveal","bgReveal","BgFake3D","bgFakeThreeD","BgSkew","bgSkew","BgRotate","bgRotate","BgPan","bgPan","ImageParallax","imageParallax","BgZoomIn","bgZoomIn","BgZoomOut","bgZoomOut","effectToCssVars","params","Math","tan","Number","angle","PI","cos","sin","speed","getCssVars","name","styleMapper","_","getEffectFullName","direction","BackgroundScroll","_bgAnimations","siteRef","useRef","compRefs","stageRef","animationGroupRefs","animationSceneRefs","scrollRefs","attachment","useState","schemaEditor","setSchemaEditor","selectedRange","setSelectedRange","bgAnimations","Object","fromEntries","bgScrub","map","preset","schema","range","useEffect","setData","animName","implementedAnimations","keys","filter","animationName","setAnimName","data","handleControlChange","value","currentData","cleanContainerRules","styleSheet","document","styleSheets","cssRules","i","length","cssText","startsWith","deleteRule","insertBgRotateContainerRules","insertRule","sqrt","pow","animateBg","el","animationScene","animationGroup","scroll","_ref","easing","window","ViewTimeline","_animationGroup","cancel","id","type","namedEffect","fill","iterations","componentId","element","trigger","play","_scroll","startOffset","offset","endOffset","destroy","root","current","observeViewportEntry","scenes","start","forEach","elId","_document$getElementB","getElementById","getAnimations","a","createElement","className","stage","scrollStage","ref","components","style","bgComponent","bgComponentTwo","imageComponent","key","bgLayer","bgMedia","bgImage","content","panels","globalControls","onChange","event","target","options","mainSelect","enum","includes","controls","entries","sort","_ref2","_ref3","b","_ref4","controlProps","_extends","label","_e"],"sources":["../../../src/playground/animationMotionBgScroll.stories.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\nimport { Scroll as ScrollLib } from 'fizban';\n\nimport {\n  AnimationGroup,\n  BackgroundScrollAnimation,\n  getWebAnimation,\n  getScrubScene,\n} from '../index';\nimport { Control, SelectInput } from './controls';\nimport styles from './playground.module.scss';\nimport { backgroundScrollAnimations as defs } from '../library/backgroundScroll';\n\nimport {\n  mapSchemaToDefaultData,\n  SchemaEditor,\n  schemaMapper,\n} from './playground-common';\n\nimport {\n  getPresets,\n  CONFIG,\n  AllEffectsNames,\n  OneOfBgScrubEffects,\n  SchemaValues,\n  ScrollEffectConfig,\n} from '@wix/effects-kit';\n\nimport type { Meta } from '@wix/yoshi-storybook-dependencies';\nimport type { EffectScrollRange } from '../index';\n\nexport default {\n  title: 'Animation Playground/Background Scroll',\n} as Meta;\n\nconst effectToClassMap = {\n  BgParallax: styles.bgParallax,\n  BgReveal: styles.bgReveal,\n  BgFake3D: styles.bgFakeThreeD,\n  BgSkew: styles.bgSkew,\n  BgRotate: styles.bgRotate,\n  BgPan: styles.bgPan,\n  ImageParallax: styles.imageParallax,\n  BgZoomIn: styles.bgZoomIn,\n  BgZoomOut: styles.bgZoomOut,\n};\n\nconst effectToCssVars = {\n  BgSkew: (params: any) => ({\n    '--tan-angle': `${Math.tan((Number(params.angle || 20) * Math.PI) / 180)}`,\n  }),\n  BgRotate: (params: any) => ({\n    '--cos-angle': `${Math.cos((Number(params.angle || 22) * Math.PI) / 180)}`,\n    '--sin-angle': `${Math.sin((Number(params.angle || 22) * Math.PI) / 180)}`,\n  }),\n  BgPan: (params: any) => ({\n    '--speed': `${Number(params.speed || 0.2)}`,\n  }),\n  ImageParallax: (params: any) => ({\n    '--speed': `${Number(params.speed || 1.5)}`,\n  }),\n};\n\nfunction getCssVars(\n  name: BackgroundScrollAnimation['type'],\n  params: any,\n): CSSProperties {\n  const styleMapper =\n    effectToCssVars[name as keyof typeof effectToCssVars] || ((_) => {});\n  return styleMapper(params) as CSSProperties;\n}\n\nfunction getEffectFullName(\n  name: BackgroundScrollAnimation['type'],\n  params: any,\n): string {\n  return name !== 'BgZoom'\n    ? name\n    : params.direction === 'in'\n    ? 'BgZoomIn'\n    : 'BgZoomOut';\n}\nexport const BackgroundScroll: React.FC<any> = () => {\n  const siteRef = React.useRef<HTMLDivElement>(null);\n\n  const compRefs = React.useRef<HTMLDivElement[]>([]);\n\n  const stageRef = React.useRef<HTMLDivElement>(null);\n\n  const animationGroupRefs = React.useRef<AnimationGroup[]>([]);\n  const animationSceneRefs = React.useRef<ReturnType<typeof getScrubScene>[]>(\n    [],\n  );\n  const scrollRefs = React.useRef<(typeof ScrollLib)[]>([]);\n\n  const [attachment] = React.useState<string>('scroll');\n\n  const [schemaEditor, setSchemaEditor] =\n    React.useState<SchemaEditor>('responsive');\n\n  const [selectedRange, setSelectedRange] =\n    React.useState<EffectScrollRange>('continuous');\n\n  const bgAnimations = Object.fromEntries(\n    getPresets(\n      CONFIG[schemaMapper[schemaEditor]].bgScrub,\n      ['background', 'image'],\n      true,\n    ).map((preset) => [\n      preset.name,\n      {\n        schema: preset.schema,\n        range: (preset as ScrollEffectConfig<OneOfBgScrubEffects>).range,\n      },\n    ]),\n  ) as Record<AllEffectsNames, ScrollEffectConfig<OneOfBgScrubEffects>>;\n\n  React.useEffect(() => {\n    setData(\n      mapSchemaToDefaultData(\n        bgAnimations[animName].schema[\n          selectedRange\n        ] as ScrollEffectConfig<OneOfBgScrubEffects>['schema'][EffectScrollRange],\n        schemaEditor,\n      ),\n    );\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [schemaEditor, selectedRange]);\n\n  const implementedAnimations = Object.keys(defs).filter(\n    (animationName) => bgAnimations[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 schema = (bgAnimations[animName].schema ||\n    {}) as ScrollEffectConfig<OneOfBgScrubEffects>['schema'];\n\n  const [data, setData] = React.useState<Record<string, any>>(\n    mapSchemaToDefaultData(schema[selectedRange], schemaEditor),\n  );\n\n  function handleControlChange(name: string, value: any) {\n    setData((currentData) => ({\n      ...currentData,\n      [name]: value,\n    }));\n  }\n\n  function cleanContainerRules() {\n    const styleSheet = document.styleSheets[0];\n    const { cssRules } = styleSheet;\n    for (let i = 0; i < cssRules.length; i++) {\n      if (cssRules[i].cssText.startsWith('@container')) {\n        styleSheet.deleteRule(i);\n        i--;\n      }\n    }\n  }\n\n  function insertBgRotateContainerRules(angle: number) {\n    const styleSheet = document.styleSheets[0];\n\n    /*\n    @container (max-aspect-ratio: tan(angle)) {\n        #bgMedia-0, #bgMedia-1 {\n            height: calc(100% + min(100% * (sqrt(1 + tan(angle)^2) - 1), 100cqw * sin(angle)));\n        }\n    }\n    */\n    styleSheet.insertRule(\n      `@container (max-aspect-ratio: ${Math.tan(\n        (angle * Math.PI) / 180,\n      )}) { #bgMedia-0, #bgMedia-1 { height: calc(100% + min(${\n        100 *\n        (Math.sqrt(1 + Math.pow(Math.tan((angle * Math.PI) / 180), 2)) - 1)\n      }%, ${100 * Math.sin((angle * Math.PI) / 180)}cqw)) } }`,\n      0,\n    );\n\n    /*\n    @container (max-aspect-ratio: tan(90 - angle)) {\n        #bgMedia-0, #bgMedia-1 {\n            width: calc(100% + min(100% * (sqrt(1 + tan(angle)^2) - 1), 100cqh * sin(angle)));\n        }\n    }\n    */\n    styleSheet.insertRule(\n      `@container (min-aspect-ratio: ${Math.tan(\n        ((90 - angle) * Math.PI) / 180,\n      )}) { #bgMedia-0, #bgMedia-1 { width: calc(100% + min(${\n        100 *\n        (Math.sqrt(1 + Math.pow(Math.tan((angle * Math.PI) / 180), 2)) - 1)\n      }%, ${100 * Math.sin((angle * Math.PI) / 180)}cqh)) } }`,\n      0,\n    );\n  }\n\n  function animateBg(\n    el: HTMLElement,\n    name: string,\n    animationScene: ReturnType<typeof getScrubScene>,\n    animationGroup: AnimationGroup,\n    scroll: typeof ScrollLib,\n    { easing = '', range = selectedRange, ...params },\n  ) {\n    cleanContainerRules();\n    if (name === 'BgRotate') {\n      insertBgRotateContainerRules(params.angle || 22);\n    }\n    if (window.ViewTimeline) {\n      animationGroup?.cancel();\n\n      animationGroup = getWebAnimation(\n        el.id,\n        {\n          id: '',\n          type: 'ScrubAnimationOptions',\n          namedEffect: {\n            id: '',\n            type: name,\n            range,\n            ...params,\n          } as BackgroundScrollAnimation,\n          fill: 'both',\n          iterations: 1,\n          easing,\n        },\n        { componentId: el.id, element: el, trigger: 'view-progress', id: '' },\n      ) as AnimationGroup;\n      animationGroup!.play();\n    } else {\n      animationScene = getScrubScene(\n        el.id,\n        {\n          id: '',\n          type: 'ScrubAnimationOptions',\n          namedEffect: {\n            id: '',\n            type: name,\n            range,\n            ...params,\n          } as BackgroundScrollAnimation,\n          fill: 'both',\n          iterations: 1,\n          startOffset: {\n            name: 'cover',\n            offset: {\n              value: 0,\n              type: 'percentage',\n            },\n          },\n          endOffset: {\n            name: 'cover',\n            offset: {\n              value: 100,\n              type: 'percentage',\n            },\n          },\n          easing,\n        },\n        { componentId: el.id, element: el, trigger: 'view-progress', id: '' },\n      );\n\n      scroll?.destroy();\n\n      scroll = new ScrollLib({\n        root: stageRef.current,\n        observeViewportEntry: false,\n        scenes: [animationScene],\n      });\n      scroll.start();\n    }\n  }\n\n  React.useEffect(() => {\n    for (let i = 0; i < 2; ++i) {\n      animateBg(\n        compRefs.current[i]!,\n        animName,\n        animationSceneRefs.current[i],\n        animationGroupRefs.current[i],\n        scrollRefs.current[i],\n        {\n          ...data,\n        },\n      );\n    }\n    return () => {\n      if (window.ViewTimeline) {\n        [\n          'bgLayer-0',\n          'bgLayer-1',\n          'bgMedia-0',\n          'bgMedia-1',\n          'bgImage-0',\n          'bgImage-1',\n        ].forEach((elId) => {\n          document\n            .getElementById(elId)\n            ?.getAnimations()\n            .forEach((a) => {\n              a.cancel();\n            });\n        });\n      }\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [animName, data]);\n\n  return (\n    <div\n      className={`${styles.stage} ${styles.scrollStage} ${styles.bgScrub}`}\n      ref={stageRef}\n    >\n      <div\n        className={styles.components}\n        ref={siteRef}\n        style={\n          {\n            '--attachment': attachment,\n          } as CSSProperties\n        }\n      >\n        {[0, 1].map((_, i) => (\n          <div\n            id={`comp-${i}`}\n            className={`${styles.bgComponent} ${\n              i ? styles.bgComponentTwo : ''\n            } ${animName === 'ImageParallax' ? styles.imageComponent : ''}`}\n            ref={(ref: HTMLDivElement | null) => (compRefs.current[i] = ref!)}\n            key={`comp-${i}`}\n          >\n            <div\n              id={`bgLayer-${i}`}\n              className={styles.bgLayer}\n              data-motion-part={`BG_LAYER comp-${i}`}\n            >\n              <div\n                id={`bgMedia-${i}`}\n                className={`${styles.bgMedia} ${\n                  effectToClassMap[\n                    getEffectFullName(\n                      animName,\n                      data,\n                    ) as keyof typeof effectToClassMap\n                  ] || ''\n                }`}\n                data-motion-part={`BG_MEDIA comp-${i}`}\n                style={getCssVars(animName || 'BgCloseUp', data)}\n              >\n                <div\n                  id={`bgImage-${i}`}\n                  className={`${styles.bgImage} ${\n                    effectToClassMap[\n                      getEffectFullName(\n                        animName,\n                        data,\n                      ) as keyof typeof effectToClassMap\n                    ] || ''\n                  }`}\n                  data-motion-part={`BG_IMG comp-${i}`}\n                ></div>\n              </div>\n            </div>\n            <div id=\"content\" className={styles.content}>\n              Background Scrub\n            </div>\n          </div>\n        ))}\n      </div>\n      <div className={styles.panels}>\n        <div className={styles.globalControls}>\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: EffectScrollRange = event.target.value;\n              setSelectedRange(value);\n            }}\n            value={selectedRange}\n            options={\n              bgAnimations[animName as AllEffectsNames]?.range\n                ?.enum as EffectScrollRange[]\n            }\n            className={styles.mainSelect}\n          />\n          <SelectInput\n            onChange={(event) => {\n              const value = event.target.value;\n              setAnimName(value);\n              if (\n                !bgAnimations[value as typeof animName].schema[selectedRange]\n              ) {\n                setSelectedRange(\n                  bgAnimations[value as typeof animName].range.enum![0],\n                );\n              }\n              setData(\n                mapSchemaToDefaultData(\n                  (bgAnimations[value as typeof animName].schema[\n                    selectedRange\n                  ] ||\n                    {}) as ScrollEffectConfig<OneOfBgScrubEffects>['schema'][EffectScrollRange],\n                  schemaEditor,\n                ),\n              );\n            }}\n            value={animName}\n            options={\n              Object.keys(bgAnimations).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[selectedRange]!)\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 as SchemaValues)}\n                value={data[name]}\n                label={name}\n                onChange={(_e, value) => handleControlChange(name, value)}\n              />\n            ))}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";AAAA,OAAOA,KAAK,MAAyB,OAAO;AAC5C,SAASC,MAAM,IAAIC,SAAS,QAAQ,QAAQ;AAE5C,SAGEC,eAAe,EACfC,aAAa,QACR,UAAU;AACjB,SAASC,OAAO,EAAEC,WAAW,QAAQ,YAAY;AACjD,OAAOC,MAAM,MAAM,0BAA0B;AAC7C,SAASC,0BAA0B,IAAIC,IAAI,QAAQ,6BAA6B;AAEhF,SACEC,sBAAsB,EAEtBC,YAAY,QACP,qBAAqB;AAE5B,SACEC,UAAU,EACVC,MAAM,QAKD,kBAAkB;AAKzB,eAAe;EACbC,KAAK,EAAE;AACT,CAAC;AAED,MAAMC,gBAAgB,GAAG;EACvBC,UAAU,EAAET,MAAM,CAACU,UAAU;EAC7BC,QAAQ,EAAEX,MAAM,CAACY,QAAQ;EACzBC,QAAQ,EAAEb,MAAM,CAACc,YAAY;EAC7BC,MAAM,EAAEf,MAAM,CAACgB,MAAM;EACrBC,QAAQ,EAAEjB,MAAM,CAACkB,QAAQ;EACzBC,KAAK,EAAEnB,MAAM,CAACoB,KAAK;EACnBC,aAAa,EAAErB,MAAM,CAACsB,aAAa;EACnCC,QAAQ,EAAEvB,MAAM,CAACwB,QAAQ;EACzBC,SAAS,EAAEzB,MAAM,CAAC0B;AACpB,CAAC;AAED,MAAMC,eAAe,GAAG;EACtBZ,MAAM,EAAGa,MAAW,KAAM;IACxB,aAAa,EAAE,GAAGC,IAAI,CAACC,GAAG,CAAEC,MAAM,CAACH,MAAM,CAACI,KAAK,IAAI,EAAE,CAAC,GAAGH,IAAI,CAACI,EAAE,GAAI,GAAG,CAAC;EAC1E,CAAC,CAAC;EACFhB,QAAQ,EAAGW,MAAW,KAAM;IAC1B,aAAa,EAAE,GAAGC,IAAI,CAACK,GAAG,CAAEH,MAAM,CAACH,MAAM,CAACI,KAAK,IAAI,EAAE,CAAC,GAAGH,IAAI,CAACI,EAAE,GAAI,GAAG,CAAC,EAAE;IAC1E,aAAa,EAAE,GAAGJ,IAAI,CAACM,GAAG,CAAEJ,MAAM,CAACH,MAAM,CAACI,KAAK,IAAI,EAAE,CAAC,GAAGH,IAAI,CAACI,EAAE,GAAI,GAAG,CAAC;EAC1E,CAAC,CAAC;EACFd,KAAK,EAAGS,MAAW,KAAM;IACvB,SAAS,EAAE,GAAGG,MAAM,CAACH,MAAM,CAACQ,KAAK,IAAI,GAAG,CAAC;EAC3C,CAAC,CAAC;EACFf,aAAa,EAAGO,MAAW,KAAM;IAC/B,SAAS,EAAE,GAAGG,MAAM,CAACH,MAAM,CAACQ,KAAK,IAAI,GAAG,CAAC;EAC3C,CAAC;AACH,CAAC;AAED,SAASC,UAAUA,CACjBC,IAAuC,EACvCV,MAAW,EACI;EACf,MAAMW,WAAW,GACfZ,eAAe,CAACW,IAAI,CAAiC,KAAME,CAAC,IAAK,CAAC,CAAC,CAAC;EACtE,OAAOD,WAAW,CAACX,MAAM,CAAC;AAC5B;AAEA,SAASa,iBAAiBA,CACxBH,IAAuC,EACvCV,MAAW,EACH;EACR,OAAOU,IAAI,KAAK,QAAQ,GACpBA,IAAI,GACJV,MAAM,CAACc,SAAS,KAAK,IAAI,GACzB,UAAU,GACV,WAAW;AACjB;AACA,OAAO,MAAMC,gBAA+B,GAAGA,CAAA,KAAM;EAAA,IAAAC,aAAA;EACnD,MAAMC,OAAO,GAAGpD,KAAK,CAACqD,MAAM,CAAiB,IAAI,CAAC;EAElD,MAAMC,QAAQ,GAAGtD,KAAK,CAACqD,MAAM,CAAmB,EAAE,CAAC;EAEnD,MAAME,QAAQ,GAAGvD,KAAK,CAACqD,MAAM,CAAiB,IAAI,CAAC;EAEnD,MAAMG,kBAAkB,GAAGxD,KAAK,CAACqD,MAAM,CAAmB,EAAE,CAAC;EAC7D,MAAMI,kBAAkB,GAAGzD,KAAK,CAACqD,MAAM,CACrC,EACF,CAAC;EACD,MAAMK,UAAU,GAAG1D,KAAK,CAACqD,MAAM,CAAuB,EAAE,CAAC;EAEzD,MAAM,CAACM,UAAU,CAAC,GAAG3D,KAAK,CAAC4D,QAAQ,CAAS,QAAQ,CAAC;EAErD,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GACnC9D,KAAK,CAAC4D,QAAQ,CAAe,YAAY,CAAC;EAE5C,MAAM,CAACG,aAAa,EAAEC,gBAAgB,CAAC,GACrChE,KAAK,CAAC4D,QAAQ,CAAoB,YAAY,CAAC;EAEjD,MAAMK,YAAY,GAAGC,MAAM,CAACC,WAAW,CACrCvD,UAAU,CACRC,MAAM,CAACF,YAAY,CAACkD,YAAY,CAAC,CAAC,CAACO,OAAO,EAC1C,CAAC,YAAY,EAAE,OAAO,CAAC,EACvB,IACF,CAAC,CAACC,GAAG,CAAEC,MAAM,IAAK,CAChBA,MAAM,CAACzB,IAAI,EACX;IACE0B,MAAM,EAAED,MAAM,CAACC,MAAM;IACrBC,KAAK,EAAGF,MAAM,CAA6CE;EAC7D,CAAC,CACF,CACH,CAAqE;EAErExE,KAAK,CAACyE,SAAS,CAAC,MAAM;IACpBC,OAAO,CACLhE,sBAAsB,CACpBuD,YAAY,CAACU,QAAQ,CAAC,CAACJ,MAAM,CAC3BR,aAAa,CACd,EACDF,YACF,CACF,CAAC;IACD;EACF,CAAC,EAAE,CAACA,YAAY,EAAEE,aAAa,CAAC,CAAC;EAEjC,MAAMa,qBAAqB,GAAGV,MAAM,CAACW,IAAI,CAACpE,IAAI,CAAC,CAACqE,MAAM,CACnDC,aAAa,IAAKd,YAAY,CAACc,aAAa,CAC/C,CAAsB;EAEtB,MAAM,CAACJ,QAAQ,EAAEK,WAAW,CAAC,GAAGhF,KAAK,CAAC4D,QAAQ,CAC5CgB,qBAAqB,CAAC,CAAC,CACzB,CAAC;EAED,MAAML,MAAM,GAAIN,YAAY,CAACU,QAAQ,CAAC,CAACJ,MAAM,IAC3C,CAAC,CAAuD;EAE1D,MAAM,CAACU,IAAI,EAAEP,OAAO,CAAC,GAAG1E,KAAK,CAAC4D,QAAQ,CACpClD,sBAAsB,CAAC6D,MAAM,CAACR,aAAa,CAAC,EAAEF,YAAY,CAC5D,CAAC;EAED,SAASqB,mBAAmBA,CAACrC,IAAY,EAAEsC,KAAU,EAAE;IACrDT,OAAO,CAAEU,WAAW,KAAM;MACxB,GAAGA,WAAW;MACd,CAACvC,IAAI,GAAGsC;IACV,CAAC,CAAC,CAAC;EACL;EAEA,SAASE,mBAAmBA,CAAA,EAAG;IAC7B,MAAMC,UAAU,GAAGC,QAAQ,CAACC,WAAW,CAAC,CAAC,CAAC;IAC1C,MAAM;MAAEC;IAAS,CAAC,GAAGH,UAAU;IAC/B,KAAK,IAAII,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGD,QAAQ,CAACE,MAAM,EAAED,CAAC,EAAE,EAAE;MACxC,IAAID,QAAQ,CAACC,CAAC,CAAC,CAACE,OAAO,CAACC,UAAU,CAAC,YAAY,CAAC,EAAE;QAChDP,UAAU,CAACQ,UAAU,CAACJ,CAAC,CAAC;QACxBA,CAAC,EAAE;MACL;IACF;EACF;EAEA,SAASK,4BAA4BA,CAACxD,KAAa,EAAE;IACnD,MAAM+C,UAAU,GAAGC,QAAQ,CAACC,WAAW,CAAC,CAAC,CAAC;;IAE1C;AACJ;AACA;AACA;AACA;AACA;AACA;IACIF,UAAU,CAACU,UAAU,CACnB,iCAAiC5D,IAAI,CAACC,GAAG,CACtCE,KAAK,GAAGH,IAAI,CAACI,EAAE,GAAI,GACtB,CAAC,wDACC,GAAG,IACFJ,IAAI,CAAC6D,IAAI,CAAC,CAAC,GAAG7D,IAAI,CAAC8D,GAAG,CAAC9D,IAAI,CAACC,GAAG,CAAEE,KAAK,GAAGH,IAAI,CAACI,EAAE,GAAI,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,MAC/D,GAAG,GAAGJ,IAAI,CAACM,GAAG,CAAEH,KAAK,GAAGH,IAAI,CAACI,EAAE,GAAI,GAAG,CAAC,WAAW,EACxD,CACF,CAAC;;IAED;AACJ;AACA;AACA;AACA;AACA;AACA;IACI8C,UAAU,CAACU,UAAU,CACnB,iCAAiC5D,IAAI,CAACC,GAAG,CACtC,CAAC,EAAE,GAAGE,KAAK,IAAIH,IAAI,CAACI,EAAE,GAAI,GAC7B,CAAC,uDACC,GAAG,IACFJ,IAAI,CAAC6D,IAAI,CAAC,CAAC,GAAG7D,IAAI,CAAC8D,GAAG,CAAC9D,IAAI,CAACC,GAAG,CAAEE,KAAK,GAAGH,IAAI,CAACI,EAAE,GAAI,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,MAC/D,GAAG,GAAGJ,IAAI,CAACM,GAAG,CAAEH,KAAK,GAAGH,IAAI,CAACI,EAAE,GAAI,GAAG,CAAC,WAAW,EACxD,CACF,CAAC;EACH;EAEA,SAAS2D,SAASA,CAChBC,EAAe,EACfvD,IAAY,EACZwD,cAAgD,EAChDC,cAA8B,EAC9BC,MAAwB,EAAAC,IAAA,EAExB;IAAA,IADA;MAAEC,MAAM,GAAG,EAAE;MAAEjC,KAAK,GAAGT,aAAa;MAAE,GAAG5B;IAAO,CAAC,GAAAqE,IAAA;IAEjDnB,mBAAmB,CAAC,CAAC;IACrB,IAAIxC,IAAI,KAAK,UAAU,EAAE;MACvBkD,4BAA4B,CAAC5D,MAAM,CAACI,KAAK,IAAI,EAAE,CAAC;IAClD;IACA,IAAImE,MAAM,CAACC,YAAY,EAAE;MAAA,IAAAC,eAAA;MACvB,CAAAA,eAAA,GAAAN,cAAc,aAAdM,eAAA,CAAgBC,MAAM,CAAC,CAAC;MAExBP,cAAc,GAAGnG,eAAe,CAC9BiG,EAAE,CAACU,EAAE,EACL;QACEA,EAAE,EAAE,EAAE;QACNC,IAAI,EAAE,uBAAuB;QAC7BC,WAAW,EAAE;UACXF,EAAE,EAAE,EAAE;UACNC,IAAI,EAAElE,IAAI;UACV2B,KAAK;UACL,GAAGrC;QACL,CAA8B;QAC9B8E,IAAI,EAAE,MAAM;QACZC,UAAU,EAAE,CAAC;QACbT;MACF,CAAC,EACD;QAAEU,WAAW,EAAEf,EAAE,CAACU,EAAE;QAAEM,OAAO,EAAEhB,EAAE;QAAEiB,OAAO,EAAE,eAAe;QAAEP,EAAE,EAAE;MAAG,CACtE,CAAmB;MACnBR,cAAc,CAAEgB,IAAI,CAAC,CAAC;IACxB,CAAC,MAAM;MAAA,IAAAC,OAAA;MACLlB,cAAc,GAAGjG,aAAa,CAC5BgG,EAAE,CAACU,EAAE,EACL;QACEA,EAAE,EAAE,EAAE;QACNC,IAAI,EAAE,uBAAuB;QAC7BC,WAAW,EAAE;UACXF,EAAE,EAAE,EAAE;UACNC,IAAI,EAAElE,IAAI;UACV2B,KAAK;UACL,GAAGrC;QACL,CAA8B;QAC9B8E,IAAI,EAAE,MAAM;QACZC,UAAU,EAAE,CAAC;QACbM,WAAW,EAAE;UACX3E,IAAI,EAAE,OAAO;UACb4E,MAAM,EAAE;YACNtC,KAAK,EAAE,CAAC;YACR4B,IAAI,EAAE;UACR;QACF,CAAC;QACDW,SAAS,EAAE;UACT7E,IAAI,EAAE,OAAO;UACb4E,MAAM,EAAE;YACNtC,KAAK,EAAE,GAAG;YACV4B,IAAI,EAAE;UACR;QACF,CAAC;QACDN;MACF,CAAC,EACD;QAAEU,WAAW,EAAEf,EAAE,CAACU,EAAE;QAAEM,OAAO,EAAEhB,EAAE;QAAEiB,OAAO,EAAE,eAAe;QAAEP,EAAE,EAAE;MAAG,CACtE,CAAC;MAED,CAAAS,OAAA,GAAAhB,MAAM,aAANgB,OAAA,CAAQI,OAAO,CAAC,CAAC;MAEjBpB,MAAM,GAAG,IAAIrG,SAAS,CAAC;QACrB0H,IAAI,EAAErE,QAAQ,CAACsE,OAAO;QACtBC,oBAAoB,EAAE,KAAK;QAC3BC,MAAM,EAAE,CAAC1B,cAAc;MACzB,CAAC,CAAC;MACFE,MAAM,CAACyB,KAAK,CAAC,CAAC;IAChB;EACF;EAEAhI,KAAK,CAACyE,SAAS,CAAC,MAAM;IACpB,KAAK,IAAIiB,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAG,CAAC,EAAE,EAAEA,CAAC,EAAE;MAC1BS,SAAS,CACP7C,QAAQ,CAACuE,OAAO,CAACnC,CAAC,CAAC,EACnBf,QAAQ,EACRlB,kBAAkB,CAACoE,OAAO,CAACnC,CAAC,CAAC,EAC7BlC,kBAAkB,CAACqE,OAAO,CAACnC,CAAC,CAAC,EAC7BhC,UAAU,CAACmE,OAAO,CAACnC,CAAC,CAAC,EACrB;QACE,GAAGT;MACL,CACF,CAAC;IACH;IACA,OAAO,MAAM;MACX,IAAIyB,MAAM,CAACC,YAAY,EAAE;QACvB,CACE,WAAW,EACX,WAAW,EACX,WAAW,EACX,WAAW,EACX,WAAW,EACX,WAAW,CACZ,CAACsB,OAAO,CAAEC,IAAI,IAAK;UAAA,IAAAC,qBAAA;UAClB,CAAAA,qBAAA,GAAA5C,QAAQ,CACL6C,cAAc,CAACF,IAAI,CAAC,aADvBC,qBAAA,CAEIE,aAAa,CAAC,CAAC,CAChBJ,OAAO,CAAEK,CAAC,IAAK;YACdA,CAAC,CAACzB,MAAM,CAAC,CAAC;UACZ,CAAC,CAAC;QACN,CAAC,CAAC;MACJ;IACF,CAAC;IACD;EACF,CAAC,EAAE,CAAClC,QAAQ,EAAEM,IAAI,CAAC,CAAC;EAEpB,oBACEjF,KAAA,CAAAuI,aAAA;IACEC,SAAS,EAAE,GAAGjI,MAAM,CAACkI,KAAK,IAAIlI,MAAM,CAACmI,WAAW,IAAInI,MAAM,CAAC6D,OAAO,EAAG;IACrEuE,GAAG,EAAEpF;EAAS,gBAEdvD,KAAA,CAAAuI,aAAA;IACEC,SAAS,EAAEjI,MAAM,CAACqI,UAAW;IAC7BD,GAAG,EAAEvF,OAAQ;IACbyF,KAAK,EACH;MACE,cAAc,EAAElF;IAClB;EACD,GAEA,CAAC,CAAC,EAAE,CAAC,CAAC,CAACU,GAAG,CAAC,CAACtB,CAAC,EAAE2C,CAAC,kBACf1F,KAAA,CAAAuI,aAAA;IACEzB,EAAE,EAAE,QAAQpB,CAAC,EAAG;IAChB8C,SAAS,EAAE,GAAGjI,MAAM,CAACuI,WAAW,IAC9BpD,CAAC,GAAGnF,MAAM,CAACwI,cAAc,GAAG,EAAE,IAC5BpE,QAAQ,KAAK,eAAe,GAAGpE,MAAM,CAACyI,cAAc,GAAG,EAAE,EAAG;IAChEL,GAAG,EAAGA,GAA0B,IAAMrF,QAAQ,CAACuE,OAAO,CAACnC,CAAC,CAAC,GAAGiD,GAAM;IAClEM,GAAG,EAAE,QAAQvD,CAAC;EAAG,gBAEjB1F,KAAA,CAAAuI,aAAA;IACEzB,EAAE,EAAE,WAAWpB,CAAC,EAAG;IACnB8C,SAAS,EAAEjI,MAAM,CAAC2I,OAAQ;IAC1B,oBAAkB,iBAAiBxD,CAAC;EAAG,gBAEvC1F,KAAA,CAAAuI,aAAA;IACEzB,EAAE,EAAE,WAAWpB,CAAC,EAAG;IACnB8C,SAAS,EAAE,GAAGjI,MAAM,CAAC4I,OAAO,IAC1BpI,gBAAgB,CACdiC,iBAAiB,CACf2B,QAAQ,EACRM,IACF,CAAC,CACF,IAAI,EAAE,EACN;IACH,oBAAkB,iBAAiBS,CAAC,EAAG;IACvCmD,KAAK,EAAEjG,UAAU,CAAC+B,QAAQ,IAAI,WAAW,EAAEM,IAAI;EAAE,gBAEjDjF,KAAA,CAAAuI,aAAA;IACEzB,EAAE,EAAE,WAAWpB,CAAC,EAAG;IACnB8C,SAAS,EAAE,GAAGjI,MAAM,CAAC6I,OAAO,IAC1BrI,gBAAgB,CACdiC,iBAAiB,CACf2B,QAAQ,EACRM,IACF,CAAC,CACF,IAAI,EAAE,EACN;IACH,oBAAkB,eAAeS,CAAC;EAAG,CACjC,CACH,CACF,CAAC,eACN1F,KAAA,CAAAuI,aAAA;IAAKzB,EAAE,EAAC,SAAS;IAAC0B,SAAS,EAAEjI,MAAM,CAAC8I;EAAQ,GAAC,kBAExC,CACF,CACN,CACE,CAAC,eACNrJ,KAAA,CAAAuI,aAAA;IAAKC,SAAS,EAAEjI,MAAM,CAAC+I;EAAO,gBAC5BtJ,KAAA,CAAAuI,aAAA;IAAKC,SAAS,EAAEjI,MAAM,CAACgJ;EAAe,gBACpCvJ,KAAA,CAAAuI,aAAA,CAACjI,WAAW;IACVkJ,QAAQ,EAAGC,KAAK,IAAK;MACnB,MAAMtE,KAAmB,GAAGsE,KAAK,CAACC,MAAM,CAACvE,KAAK;MAC9CrB,eAAe,CAACqB,KAAK,CAAC;IACxB,CAAE;IACFA,KAAK,EAAEtB,YAAa;IACpB8F,OAAO,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,YAAY,CAAE;IAC7CnB,SAAS,EAAEjI,MAAM,CAACqJ;EAAW,CAC9B,CAAC,eACF5J,KAAA,CAAAuI,aAAA,CAACjI,WAAW;IACVkJ,QAAQ,EAAGC,KAAK,IAAK;MACnB,MAAMtE,KAAwB,GAAGsE,KAAK,CAACC,MAAM,CAACvE,KAAK;MACnDnB,gBAAgB,CAACmB,KAAK,CAAC;IACzB,CAAE;IACFA,KAAK,EAAEpB,aAAc;IACrB4F,OAAO,GAAAxG,aAAA,GACLc,YAAY,CAACU,QAAQ,CAAoB,cAAAxB,aAAA,GAAzCA,aAAA,CAA2CqB,KAAK,qBAAhDrB,aAAA,CACI0G,IACL;IACDrB,SAAS,EAAEjI,MAAM,CAACqJ;EAAW,CAC9B,CAAC,eACF5J,KAAA,CAAAuI,aAAA,CAACjI,WAAW;IACVkJ,QAAQ,EAAGC,KAAK,IAAK;MACnB,MAAMtE,KAAK,GAAGsE,KAAK,CAACC,MAAM,CAACvE,KAAK;MAChCH,WAAW,CAACG,KAAK,CAAC;MAClB,IACE,CAAClB,YAAY,CAACkB,KAAK,CAAoB,CAACZ,MAAM,CAACR,aAAa,CAAC,EAC7D;QACAC,gBAAgB,CACdC,YAAY,CAACkB,KAAK,CAAoB,CAACX,KAAK,CAACqF,IAAI,CAAE,CAAC,CACtD,CAAC;MACH;MACAnF,OAAO,CACLhE,sBAAsB,CACnBuD,YAAY,CAACkB,KAAK,CAAoB,CAACZ,MAAM,CAC5CR,aAAa,CACd,IACC,CAAC,CAAC,EACJF,YACF,CACF,CAAC;IACH,CAAE;IACFsB,KAAK,EAAER,QAAS;IAChBgF,OAAO,EACLzF,MAAM,CAACW,IAAI,CAACZ,YAAY,CAAC,CAACI,GAAG,CAAExB,IAAI,IAAK,CACtCA,IAAI,EACJ+B,qBAAqB,CAACkF,QAAQ,CAACjH,IAAuB,CAAC,CACxD,CACF;IACD2F,SAAS,EAAEjI,MAAM,CAACqJ;EAAW,CAC9B,CACE,CAAC,eACN5J,KAAA,CAAAuI,aAAA;IAAKC,SAAS,EAAEjI,MAAM,CAACwJ;EAAS,GAC7B7F,MAAM,CAAC8F,OAAO,CAACzF,MAAM,CAACR,aAAa,CAAE,CAAC,CACpCkG,IAAI,CAAC,CAAAC,KAAA,EAAAC,KAAA,KAAc;IAAA,IAAb,CAAC7B,CAAC,CAAC,GAAA4B,KAAA;IAAA,IAAE,CAACE,CAAC,CAAC,GAAAD,KAAA;IACb,IAAI7B,CAAC,KAAK,UAAU,IAAK8B,CAAC,KAAK,UAAU,IAAI9B,CAAC,KAAK,OAAQ,EAAE;MAC3D,OAAO,CAAC,CAAC;IACX;IACA,IAAI8B,CAAC,KAAK,aAAa,EAAE;MACvB,OAAO,CAAC,CAAC;IACX;IACA,OAAO,CAAC;EACV,CAAC,CAAC,CACD/F,GAAG,CAAC,CAAAgG,KAAA,EAAuB3E,CAAC;IAAA,IAAvB,CAAC7C,IAAI,EAAEyH,YAAY,CAAC,GAAAD,KAAA;IAAA,oBACxBrK,KAAA,CAAAuI,aAAA,CAAClI,OAAO,EAAAkK,QAAA;MACNtB,GAAG,EAAE,eAAevD,CAAC;IAAG,GACnB4E,YAAY;MACjBnF,KAAK,EAAEF,IAAI,CAACpC,IAAI,CAAE;MAClB2H,KAAK,EAAE3H,IAAK;MACZ2G,QAAQ,EAAEA,CAACiB,EAAE,EAAEtF,KAAK,KAAKD,mBAAmB,CAACrC,IAAI,EAAEsC,KAAK;IAAE,EAC3D,CAAC;EAAA,CACH,CACA,CACF,CACF,CAAC;AAEV,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Scroll","ScrollLib","getWebAnimation","getScrubScene","Control","SelectInput","styles","backgroundScrollAnimations","defs","mapSchemaToDefaultData","schemaMapper","getPresets","CONFIG","title","effectToClassMap","BgParallax","bgParallax","BgReveal","bgReveal","BgFake3D","bgFakeThreeD","BgSkew","bgSkew","BgRotate","bgRotate","BgPan","bgPan","ImageParallax","imageParallax","BgZoomIn","bgZoomIn","BgZoomOut","bgZoomOut","effectToCssVars","params","Math","tan","Number","angle","PI","cos","sin","speed","getCssVars","name","styleMapper","_","getEffectFullName","direction","BackgroundScroll","_bgAnimations","siteRef","useRef","compRefs","stageRef","animationGroupRefs","animationSceneRefs","scrollRefs","attachment","useState","schemaEditor","setSchemaEditor","selectedRange","setSelectedRange","bgAnimations","Object","fromEntries","bgScrub","map","preset","schema","range","useEffect","setData","animName","implementedAnimations","keys","filter","animationName","setAnimName","data","handleControlChange","value","currentData","cleanContainerRules","styleSheet","document","styleSheets","cssRules","i","length","cssText","startsWith","deleteRule","insertBgRotateContainerRules","insertRule","sqrt","pow","animateBg","el","animationScene","animationGroup","scroll","_ref","easing","window","ViewTimeline","_animationGroup","cancel","id","namedEffect","type","fill","iterations","componentId","element","trigger","play","_scroll","startOffset","offset","endOffset","destroy","root","current","observeViewportEntry","scenes","start","forEach","elId","_document$getElementB","getElementById","getAnimations","a","createElement","className","stage","scrollStage","ref","components","style","bgComponent","bgComponentTwo","imageComponent","key","bgLayer","bgMedia","bgImage","content","panels","globalControls","onChange","event","target","options","mainSelect","enum","includes","controls","entries","sort","_ref2","_ref3","b","_ref4","controlProps","_extends","label","_e"],"sources":["../../../src/playground/animationMotionBgScroll.stories.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\nimport { Scroll as ScrollLib } from 'fizban';\n\nimport {\n  AnimationGroup,\n  BackgroundScrollAnimation,\n  getWebAnimation,\n  getScrubScene,\n} from '../index';\nimport { Control, SelectInput } from './controls';\nimport styles from './playground.module.scss';\nimport { backgroundScrollAnimations as defs } from '../library/backgroundScroll';\n\nimport {\n  mapSchemaToDefaultData,\n  SchemaEditor,\n  schemaMapper,\n} from './playground-common';\n\nimport {\n  getPresets,\n  CONFIG,\n  AllEffectsNames,\n  OneOfBgScrubEffects,\n  SchemaValues,\n  ScrollEffectConfig,\n} from '@wix/effects-kit';\n\nimport type { Meta } from '@wix/yoshi-storybook-dependencies';\nimport type { EffectScrollRange } from '../index';\n\nexport default {\n  title: 'Animation Playground/Background Scroll',\n} as Meta;\n\nconst effectToClassMap = {\n  BgParallax: styles.bgParallax,\n  BgReveal: styles.bgReveal,\n  BgFake3D: styles.bgFakeThreeD,\n  BgSkew: styles.bgSkew,\n  BgRotate: styles.bgRotate,\n  BgPan: styles.bgPan,\n  ImageParallax: styles.imageParallax,\n  BgZoomIn: styles.bgZoomIn,\n  BgZoomOut: styles.bgZoomOut,\n};\n\nconst effectToCssVars = {\n  BgSkew: (params: any) => ({\n    '--tan-angle': `${Math.tan((Number(params.angle || 20) * Math.PI) / 180)}`,\n  }),\n  BgRotate: (params: any) => ({\n    '--cos-angle': `${Math.cos((Number(params.angle || 22) * Math.PI) / 180)}`,\n    '--sin-angle': `${Math.sin((Number(params.angle || 22) * Math.PI) / 180)}`,\n  }),\n  BgPan: (params: any) => ({\n    '--speed': `${Number(params.speed || 0.2)}`,\n  }),\n  ImageParallax: (params: any) => ({\n    '--speed': `${Number(params.speed || 1.5)}`,\n  }),\n};\n\nfunction getCssVars(\n  name: BackgroundScrollAnimation['type'],\n  params: any,\n): CSSProperties {\n  const styleMapper =\n    effectToCssVars[name as keyof typeof effectToCssVars] || ((_) => {});\n  return styleMapper(params) as CSSProperties;\n}\n\nfunction getEffectFullName(\n  name: BackgroundScrollAnimation['type'],\n  params: any,\n): string {\n  return name !== 'BgZoom'\n    ? name\n    : params.direction === 'in'\n    ? 'BgZoomIn'\n    : 'BgZoomOut';\n}\nexport const BackgroundScroll: React.FC<any> = () => {\n  const siteRef = React.useRef<HTMLDivElement>(null);\n\n  const compRefs = React.useRef<HTMLDivElement[]>([]);\n\n  const stageRef = React.useRef<HTMLDivElement>(null);\n\n  const animationGroupRefs = React.useRef<AnimationGroup[]>([]);\n  const animationSceneRefs = React.useRef<ReturnType<typeof getScrubScene>[]>(\n    [],\n  );\n  const scrollRefs = React.useRef<(typeof ScrollLib)[]>([]);\n\n  const [attachment] = React.useState<string>('scroll');\n\n  const [schemaEditor, setSchemaEditor] =\n    React.useState<SchemaEditor>('responsive');\n\n  const [selectedRange, setSelectedRange] =\n    React.useState<EffectScrollRange>('continuous');\n\n  const bgAnimations = Object.fromEntries(\n    getPresets(\n      CONFIG[schemaMapper[schemaEditor]].bgScrub,\n      ['background', 'image'],\n      true,\n    ).map((preset) => [\n      preset.name,\n      {\n        schema: preset.schema,\n        range: (preset as ScrollEffectConfig<OneOfBgScrubEffects>).range,\n      },\n    ]),\n  ) as Record<AllEffectsNames, ScrollEffectConfig<OneOfBgScrubEffects>>;\n\n  React.useEffect(() => {\n    setData(\n      mapSchemaToDefaultData(\n        bgAnimations[animName].schema[\n          selectedRange\n        ] as ScrollEffectConfig<OneOfBgScrubEffects>['schema'][EffectScrollRange],\n        schemaEditor,\n      ),\n    );\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [schemaEditor, selectedRange]);\n\n  const implementedAnimations = Object.keys(defs).filter(\n    (animationName) => bgAnimations[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 schema = (bgAnimations[animName].schema ||\n    {}) as ScrollEffectConfig<OneOfBgScrubEffects>['schema'];\n\n  const [data, setData] = React.useState<Record<string, any>>(\n    mapSchemaToDefaultData(schema[selectedRange], schemaEditor),\n  );\n\n  function handleControlChange(name: string, value: any) {\n    setData((currentData) => ({\n      ...currentData,\n      [name]: value,\n    }));\n  }\n\n  function cleanContainerRules() {\n    const styleSheet = document.styleSheets[0];\n    const { cssRules } = styleSheet;\n    for (let i = 0; i < cssRules.length; i++) {\n      if (cssRules[i].cssText.startsWith('@container')) {\n        styleSheet.deleteRule(i);\n        i--;\n      }\n    }\n  }\n\n  function insertBgRotateContainerRules(angle: number) {\n    const styleSheet = document.styleSheets[0];\n\n    /*\n    @container (max-aspect-ratio: tan(angle)) {\n        #bgMedia-0, #bgMedia-1 {\n            height: calc(100% + min(100% * (sqrt(1 + tan(angle)^2) - 1), 100cqw * sin(angle)));\n        }\n    }\n    */\n    styleSheet.insertRule(\n      `@container (max-aspect-ratio: ${Math.tan(\n        (angle * Math.PI) / 180,\n      )}) { #bgMedia-0, #bgMedia-1 { height: calc(100% + min(${\n        100 *\n        (Math.sqrt(1 + Math.pow(Math.tan((angle * Math.PI) / 180), 2)) - 1)\n      }%, ${100 * Math.sin((angle * Math.PI) / 180)}cqw)) } }`,\n      0,\n    );\n\n    /*\n    @container (max-aspect-ratio: tan(90 - angle)) {\n        #bgMedia-0, #bgMedia-1 {\n            width: calc(100% + min(100% * (sqrt(1 + tan(angle)^2) - 1), 100cqh * sin(angle)));\n        }\n    }\n    */\n    styleSheet.insertRule(\n      `@container (min-aspect-ratio: ${Math.tan(\n        ((90 - angle) * Math.PI) / 180,\n      )}) { #bgMedia-0, #bgMedia-1 { width: calc(100% + min(${\n        100 *\n        (Math.sqrt(1 + Math.pow(Math.tan((angle * Math.PI) / 180), 2)) - 1)\n      }%, ${100 * Math.sin((angle * Math.PI) / 180)}cqh)) } }`,\n      0,\n    );\n  }\n\n  function animateBg(\n    el: HTMLElement,\n    name: string,\n    animationScene: ReturnType<typeof getScrubScene>,\n    animationGroup: AnimationGroup,\n    scroll: typeof ScrollLib,\n    { easing = '', range = selectedRange, ...params },\n  ) {\n    cleanContainerRules();\n    if (name === 'BgRotate') {\n      insertBgRotateContainerRules(params.angle || 22);\n    }\n    if (window.ViewTimeline) {\n      animationGroup?.cancel();\n\n      animationGroup = getWebAnimation(\n        el.id,\n        {\n          id: '',\n          namedEffect: {\n            id: '',\n            type: name,\n            range,\n            ...params,\n          } as BackgroundScrollAnimation,\n          fill: 'both',\n          iterations: 1,\n          easing,\n        },\n        { componentId: el.id, element: el, trigger: 'view-progress', id: '' },\n      ) as AnimationGroup;\n      animationGroup!.play();\n    } else {\n      animationScene = getScrubScene(\n        el.id,\n        {\n          id: '',\n          namedEffect: {\n            id: '',\n            type: name,\n            range,\n            ...params,\n          } as BackgroundScrollAnimation,\n          fill: 'both',\n          iterations: 1,\n          startOffset: {\n            name: 'cover',\n            offset: {\n              value: 0,\n              type: 'percentage',\n            },\n          },\n          endOffset: {\n            name: 'cover',\n            offset: {\n              value: 100,\n              type: 'percentage',\n            },\n          },\n          easing,\n        },\n        { componentId: el.id, element: el, trigger: 'view-progress', id: '' },\n      );\n\n      scroll?.destroy();\n\n      scroll = new ScrollLib({\n        root: stageRef.current,\n        observeViewportEntry: false,\n        scenes: [animationScene],\n      });\n      scroll.start();\n    }\n  }\n\n  React.useEffect(() => {\n    for (let i = 0; i < 2; ++i) {\n      animateBg(\n        compRefs.current[i]!,\n        animName,\n        animationSceneRefs.current[i],\n        animationGroupRefs.current[i],\n        scrollRefs.current[i],\n        {\n          ...data,\n        },\n      );\n    }\n    return () => {\n      if (window.ViewTimeline) {\n        [\n          'bgLayer-0',\n          'bgLayer-1',\n          'bgMedia-0',\n          'bgMedia-1',\n          'bgImage-0',\n          'bgImage-1',\n        ].forEach((elId) => {\n          document\n            .getElementById(elId)\n            ?.getAnimations()\n            .forEach((a) => {\n              a.cancel();\n            });\n        });\n      }\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [animName, data]);\n\n  return (\n    <div\n      className={`${styles.stage} ${styles.scrollStage} ${styles.bgScrub}`}\n      ref={stageRef}\n    >\n      <div\n        className={styles.components}\n        ref={siteRef}\n        style={\n          {\n            '--attachment': attachment,\n          } as CSSProperties\n        }\n      >\n        {[0, 1].map((_, i) => (\n          <div\n            id={`comp-${i}`}\n            className={`${styles.bgComponent} ${\n              i ? styles.bgComponentTwo : ''\n            } ${animName === 'ImageParallax' ? styles.imageComponent : ''}`}\n            ref={(ref: HTMLDivElement | null) => (compRefs.current[i] = ref!)}\n            key={`comp-${i}`}\n          >\n            <div\n              id={`bgLayer-${i}`}\n              className={styles.bgLayer}\n              data-motion-part={`BG_LAYER comp-${i}`}\n            >\n              <div\n                id={`bgMedia-${i}`}\n                className={`${styles.bgMedia} ${\n                  effectToClassMap[\n                    getEffectFullName(\n                      animName,\n                      data,\n                    ) as keyof typeof effectToClassMap\n                  ] || ''\n                }`}\n                data-motion-part={`BG_MEDIA comp-${i}`}\n                style={getCssVars(animName || 'BgCloseUp', data)}\n              >\n                <div\n                  id={`bgImage-${i}`}\n                  className={`${styles.bgImage} ${\n                    effectToClassMap[\n                      getEffectFullName(\n                        animName,\n                        data,\n                      ) as keyof typeof effectToClassMap\n                    ] || ''\n                  }`}\n                  data-motion-part={`BG_IMG comp-${i}`}\n                ></div>\n              </div>\n            </div>\n            <div id=\"content\" className={styles.content}>\n              Background Scrub\n            </div>\n          </div>\n        ))}\n      </div>\n      <div className={styles.panels}>\n        <div className={styles.globalControls}>\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: EffectScrollRange = event.target.value;\n              setSelectedRange(value);\n            }}\n            value={selectedRange}\n            options={\n              bgAnimations[animName as AllEffectsNames]?.range\n                ?.enum as EffectScrollRange[]\n            }\n            className={styles.mainSelect}\n          />\n          <SelectInput\n            onChange={(event) => {\n              const value = event.target.value;\n              setAnimName(value);\n              if (\n                !bgAnimations[value as typeof animName].schema[selectedRange]\n              ) {\n                setSelectedRange(\n                  bgAnimations[value as typeof animName].range.enum![0],\n                );\n              }\n              setData(\n                mapSchemaToDefaultData(\n                  (bgAnimations[value as typeof animName].schema[\n                    selectedRange\n                  ] ||\n                    {}) as ScrollEffectConfig<OneOfBgScrubEffects>['schema'][EffectScrollRange],\n                  schemaEditor,\n                ),\n              );\n            }}\n            value={animName}\n            options={\n              Object.keys(bgAnimations).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[selectedRange]!)\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 as SchemaValues)}\n                value={data[name]}\n                label={name}\n                onChange={(_e, value) => handleControlChange(name, value)}\n              />\n            ))}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";AAAA,OAAOA,KAAK,MAAyB,OAAO;AAC5C,SAASC,MAAM,IAAIC,SAAS,QAAQ,QAAQ;AAE5C,SAGEC,eAAe,EACfC,aAAa,QACR,UAAU;AACjB,SAASC,OAAO,EAAEC,WAAW,QAAQ,YAAY;AACjD,OAAOC,MAAM,MAAM,0BAA0B;AAC7C,SAASC,0BAA0B,IAAIC,IAAI,QAAQ,6BAA6B;AAEhF,SACEC,sBAAsB,EAEtBC,YAAY,QACP,qBAAqB;AAE5B,SACEC,UAAU,EACVC,MAAM,QAKD,kBAAkB;AAKzB,eAAe;EACbC,KAAK,EAAE;AACT,CAAC;AAED,MAAMC,gBAAgB,GAAG;EACvBC,UAAU,EAAET,MAAM,CAACU,UAAU;EAC7BC,QAAQ,EAAEX,MAAM,CAACY,QAAQ;EACzBC,QAAQ,EAAEb,MAAM,CAACc,YAAY;EAC7BC,MAAM,EAAEf,MAAM,CAACgB,MAAM;EACrBC,QAAQ,EAAEjB,MAAM,CAACkB,QAAQ;EACzBC,KAAK,EAAEnB,MAAM,CAACoB,KAAK;EACnBC,aAAa,EAAErB,MAAM,CAACsB,aAAa;EACnCC,QAAQ,EAAEvB,MAAM,CAACwB,QAAQ;EACzBC,SAAS,EAAEzB,MAAM,CAAC0B;AACpB,CAAC;AAED,MAAMC,eAAe,GAAG;EACtBZ,MAAM,EAAGa,MAAW,KAAM;IACxB,aAAa,EAAE,GAAGC,IAAI,CAACC,GAAG,CAAEC,MAAM,CAACH,MAAM,CAACI,KAAK,IAAI,EAAE,CAAC,GAAGH,IAAI,CAACI,EAAE,GAAI,GAAG,CAAC;EAC1E,CAAC,CAAC;EACFhB,QAAQ,EAAGW,MAAW,KAAM;IAC1B,aAAa,EAAE,GAAGC,IAAI,CAACK,GAAG,CAAEH,MAAM,CAACH,MAAM,CAACI,KAAK,IAAI,EAAE,CAAC,GAAGH,IAAI,CAACI,EAAE,GAAI,GAAG,CAAC,EAAE;IAC1E,aAAa,EAAE,GAAGJ,IAAI,CAACM,GAAG,CAAEJ,MAAM,CAACH,MAAM,CAACI,KAAK,IAAI,EAAE,CAAC,GAAGH,IAAI,CAACI,EAAE,GAAI,GAAG,CAAC;EAC1E,CAAC,CAAC;EACFd,KAAK,EAAGS,MAAW,KAAM;IACvB,SAAS,EAAE,GAAGG,MAAM,CAACH,MAAM,CAACQ,KAAK,IAAI,GAAG,CAAC;EAC3C,CAAC,CAAC;EACFf,aAAa,EAAGO,MAAW,KAAM;IAC/B,SAAS,EAAE,GAAGG,MAAM,CAACH,MAAM,CAACQ,KAAK,IAAI,GAAG,CAAC;EAC3C,CAAC;AACH,CAAC;AAED,SAASC,UAAUA,CACjBC,IAAuC,EACvCV,MAAW,EACI;EACf,MAAMW,WAAW,GACfZ,eAAe,CAACW,IAAI,CAAiC,KAAME,CAAC,IAAK,CAAC,CAAC,CAAC;EACtE,OAAOD,WAAW,CAACX,MAAM,CAAC;AAC5B;AAEA,SAASa,iBAAiBA,CACxBH,IAAuC,EACvCV,MAAW,EACH;EACR,OAAOU,IAAI,KAAK,QAAQ,GACpBA,IAAI,GACJV,MAAM,CAACc,SAAS,KAAK,IAAI,GACzB,UAAU,GACV,WAAW;AACjB;AACA,OAAO,MAAMC,gBAA+B,GAAGA,CAAA,KAAM;EAAA,IAAAC,aAAA;EACnD,MAAMC,OAAO,GAAGpD,KAAK,CAACqD,MAAM,CAAiB,IAAI,CAAC;EAElD,MAAMC,QAAQ,GAAGtD,KAAK,CAACqD,MAAM,CAAmB,EAAE,CAAC;EAEnD,MAAME,QAAQ,GAAGvD,KAAK,CAACqD,MAAM,CAAiB,IAAI,CAAC;EAEnD,MAAMG,kBAAkB,GAAGxD,KAAK,CAACqD,MAAM,CAAmB,EAAE,CAAC;EAC7D,MAAMI,kBAAkB,GAAGzD,KAAK,CAACqD,MAAM,CACrC,EACF,CAAC;EACD,MAAMK,UAAU,GAAG1D,KAAK,CAACqD,MAAM,CAAuB,EAAE,CAAC;EAEzD,MAAM,CAACM,UAAU,CAAC,GAAG3D,KAAK,CAAC4D,QAAQ,CAAS,QAAQ,CAAC;EAErD,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GACnC9D,KAAK,CAAC4D,QAAQ,CAAe,YAAY,CAAC;EAE5C,MAAM,CAACG,aAAa,EAAEC,gBAAgB,CAAC,GACrChE,KAAK,CAAC4D,QAAQ,CAAoB,YAAY,CAAC;EAEjD,MAAMK,YAAY,GAAGC,MAAM,CAACC,WAAW,CACrCvD,UAAU,CACRC,MAAM,CAACF,YAAY,CAACkD,YAAY,CAAC,CAAC,CAACO,OAAO,EAC1C,CAAC,YAAY,EAAE,OAAO,CAAC,EACvB,IACF,CAAC,CAACC,GAAG,CAAEC,MAAM,IAAK,CAChBA,MAAM,CAACzB,IAAI,EACX;IACE0B,MAAM,EAAED,MAAM,CAACC,MAAM;IACrBC,KAAK,EAAGF,MAAM,CAA6CE;EAC7D,CAAC,CACF,CACH,CAAqE;EAErExE,KAAK,CAACyE,SAAS,CAAC,MAAM;IACpBC,OAAO,CACLhE,sBAAsB,CACpBuD,YAAY,CAACU,QAAQ,CAAC,CAACJ,MAAM,CAC3BR,aAAa,CACd,EACDF,YACF,CACF,CAAC;IACD;EACF,CAAC,EAAE,CAACA,YAAY,EAAEE,aAAa,CAAC,CAAC;EAEjC,MAAMa,qBAAqB,GAAGV,MAAM,CAACW,IAAI,CAACpE,IAAI,CAAC,CAACqE,MAAM,CACnDC,aAAa,IAAKd,YAAY,CAACc,aAAa,CAC/C,CAAsB;EAEtB,MAAM,CAACJ,QAAQ,EAAEK,WAAW,CAAC,GAAGhF,KAAK,CAAC4D,QAAQ,CAC5CgB,qBAAqB,CAAC,CAAC,CACzB,CAAC;EAED,MAAML,MAAM,GAAIN,YAAY,CAACU,QAAQ,CAAC,CAACJ,MAAM,IAC3C,CAAC,CAAuD;EAE1D,MAAM,CAACU,IAAI,EAAEP,OAAO,CAAC,GAAG1E,KAAK,CAAC4D,QAAQ,CACpClD,sBAAsB,CAAC6D,MAAM,CAACR,aAAa,CAAC,EAAEF,YAAY,CAC5D,CAAC;EAED,SAASqB,mBAAmBA,CAACrC,IAAY,EAAEsC,KAAU,EAAE;IACrDT,OAAO,CAAEU,WAAW,KAAM;MACxB,GAAGA,WAAW;MACd,CAACvC,IAAI,GAAGsC;IACV,CAAC,CAAC,CAAC;EACL;EAEA,SAASE,mBAAmBA,CAAA,EAAG;IAC7B,MAAMC,UAAU,GAAGC,QAAQ,CAACC,WAAW,CAAC,CAAC,CAAC;IAC1C,MAAM;MAAEC;IAAS,CAAC,GAAGH,UAAU;IAC/B,KAAK,IAAII,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGD,QAAQ,CAACE,MAAM,EAAED,CAAC,EAAE,EAAE;MACxC,IAAID,QAAQ,CAACC,CAAC,CAAC,CAACE,OAAO,CAACC,UAAU,CAAC,YAAY,CAAC,EAAE;QAChDP,UAAU,CAACQ,UAAU,CAACJ,CAAC,CAAC;QACxBA,CAAC,EAAE;MACL;IACF;EACF;EAEA,SAASK,4BAA4BA,CAACxD,KAAa,EAAE;IACnD,MAAM+C,UAAU,GAAGC,QAAQ,CAACC,WAAW,CAAC,CAAC,CAAC;;IAE1C;AACJ;AACA;AACA;AACA;AACA;AACA;IACIF,UAAU,CAACU,UAAU,CACnB,iCAAiC5D,IAAI,CAACC,GAAG,CACtCE,KAAK,GAAGH,IAAI,CAACI,EAAE,GAAI,GACtB,CAAC,wDACC,GAAG,IACFJ,IAAI,CAAC6D,IAAI,CAAC,CAAC,GAAG7D,IAAI,CAAC8D,GAAG,CAAC9D,IAAI,CAACC,GAAG,CAAEE,KAAK,GAAGH,IAAI,CAACI,EAAE,GAAI,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,MAC/D,GAAG,GAAGJ,IAAI,CAACM,GAAG,CAAEH,KAAK,GAAGH,IAAI,CAACI,EAAE,GAAI,GAAG,CAAC,WAAW,EACxD,CACF,CAAC;;IAED;AACJ;AACA;AACA;AACA;AACA;AACA;IACI8C,UAAU,CAACU,UAAU,CACnB,iCAAiC5D,IAAI,CAACC,GAAG,CACtC,CAAC,EAAE,GAAGE,KAAK,IAAIH,IAAI,CAACI,EAAE,GAAI,GAC7B,CAAC,uDACC,GAAG,IACFJ,IAAI,CAAC6D,IAAI,CAAC,CAAC,GAAG7D,IAAI,CAAC8D,GAAG,CAAC9D,IAAI,CAACC,GAAG,CAAEE,KAAK,GAAGH,IAAI,CAACI,EAAE,GAAI,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,MAC/D,GAAG,GAAGJ,IAAI,CAACM,GAAG,CAAEH,KAAK,GAAGH,IAAI,CAACI,EAAE,GAAI,GAAG,CAAC,WAAW,EACxD,CACF,CAAC;EACH;EAEA,SAAS2D,SAASA,CAChBC,EAAe,EACfvD,IAAY,EACZwD,cAAgD,EAChDC,cAA8B,EAC9BC,MAAwB,EAAAC,IAAA,EAExB;IAAA,IADA;MAAEC,MAAM,GAAG,EAAE;MAAEjC,KAAK,GAAGT,aAAa;MAAE,GAAG5B;IAAO,CAAC,GAAAqE,IAAA;IAEjDnB,mBAAmB,CAAC,CAAC;IACrB,IAAIxC,IAAI,KAAK,UAAU,EAAE;MACvBkD,4BAA4B,CAAC5D,MAAM,CAACI,KAAK,IAAI,EAAE,CAAC;IAClD;IACA,IAAImE,MAAM,CAACC,YAAY,EAAE;MAAA,IAAAC,eAAA;MACvB,CAAAA,eAAA,GAAAN,cAAc,aAAdM,eAAA,CAAgBC,MAAM,CAAC,CAAC;MAExBP,cAAc,GAAGnG,eAAe,CAC9BiG,EAAE,CAACU,EAAE,EACL;QACEA,EAAE,EAAE,EAAE;QACNC,WAAW,EAAE;UACXD,EAAE,EAAE,EAAE;UACNE,IAAI,EAAEnE,IAAI;UACV2B,KAAK;UACL,GAAGrC;QACL,CAA8B;QAC9B8E,IAAI,EAAE,MAAM;QACZC,UAAU,EAAE,CAAC;QACbT;MACF,CAAC,EACD;QAAEU,WAAW,EAAEf,EAAE,CAACU,EAAE;QAAEM,OAAO,EAAEhB,EAAE;QAAEiB,OAAO,EAAE,eAAe;QAAEP,EAAE,EAAE;MAAG,CACtE,CAAmB;MACnBR,cAAc,CAAEgB,IAAI,CAAC,CAAC;IACxB,CAAC,MAAM;MAAA,IAAAC,OAAA;MACLlB,cAAc,GAAGjG,aAAa,CAC5BgG,EAAE,CAACU,EAAE,EACL;QACEA,EAAE,EAAE,EAAE;QACNC,WAAW,EAAE;UACXD,EAAE,EAAE,EAAE;UACNE,IAAI,EAAEnE,IAAI;UACV2B,KAAK;UACL,GAAGrC;QACL,CAA8B;QAC9B8E,IAAI,EAAE,MAAM;QACZC,UAAU,EAAE,CAAC;QACbM,WAAW,EAAE;UACX3E,IAAI,EAAE,OAAO;UACb4E,MAAM,EAAE;YACNtC,KAAK,EAAE,CAAC;YACR6B,IAAI,EAAE;UACR;QACF,CAAC;QACDU,SAAS,EAAE;UACT7E,IAAI,EAAE,OAAO;UACb4E,MAAM,EAAE;YACNtC,KAAK,EAAE,GAAG;YACV6B,IAAI,EAAE;UACR;QACF,CAAC;QACDP;MACF,CAAC,EACD;QAAEU,WAAW,EAAEf,EAAE,CAACU,EAAE;QAAEM,OAAO,EAAEhB,EAAE;QAAEiB,OAAO,EAAE,eAAe;QAAEP,EAAE,EAAE;MAAG,CACtE,CAAC;MAED,CAAAS,OAAA,GAAAhB,MAAM,aAANgB,OAAA,CAAQI,OAAO,CAAC,CAAC;MAEjBpB,MAAM,GAAG,IAAIrG,SAAS,CAAC;QACrB0H,IAAI,EAAErE,QAAQ,CAACsE,OAAO;QACtBC,oBAAoB,EAAE,KAAK;QAC3BC,MAAM,EAAE,CAAC1B,cAAc;MACzB,CAAC,CAAC;MACFE,MAAM,CAACyB,KAAK,CAAC,CAAC;IAChB;EACF;EAEAhI,KAAK,CAACyE,SAAS,CAAC,MAAM;IACpB,KAAK,IAAIiB,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAG,CAAC,EAAE,EAAEA,CAAC,EAAE;MAC1BS,SAAS,CACP7C,QAAQ,CAACuE,OAAO,CAACnC,CAAC,CAAC,EACnBf,QAAQ,EACRlB,kBAAkB,CAACoE,OAAO,CAACnC,CAAC,CAAC,EAC7BlC,kBAAkB,CAACqE,OAAO,CAACnC,CAAC,CAAC,EAC7BhC,UAAU,CAACmE,OAAO,CAACnC,CAAC,CAAC,EACrB;QACE,GAAGT;MACL,CACF,CAAC;IACH;IACA,OAAO,MAAM;MACX,IAAIyB,MAAM,CAACC,YAAY,EAAE;QACvB,CACE,WAAW,EACX,WAAW,EACX,WAAW,EACX,WAAW,EACX,WAAW,EACX,WAAW,CACZ,CAACsB,OAAO,CAAEC,IAAI,IAAK;UAAA,IAAAC,qBAAA;UAClB,CAAAA,qBAAA,GAAA5C,QAAQ,CACL6C,cAAc,CAACF,IAAI,CAAC,aADvBC,qBAAA,CAEIE,aAAa,CAAC,CAAC,CAChBJ,OAAO,CAAEK,CAAC,IAAK;YACdA,CAAC,CAACzB,MAAM,CAAC,CAAC;UACZ,CAAC,CAAC;QACN,CAAC,CAAC;MACJ;IACF,CAAC;IACD;EACF,CAAC,EAAE,CAAClC,QAAQ,EAAEM,IAAI,CAAC,CAAC;EAEpB,oBACEjF,KAAA,CAAAuI,aAAA;IACEC,SAAS,EAAE,GAAGjI,MAAM,CAACkI,KAAK,IAAIlI,MAAM,CAACmI,WAAW,IAAInI,MAAM,CAAC6D,OAAO,EAAG;IACrEuE,GAAG,EAAEpF;EAAS,gBAEdvD,KAAA,CAAAuI,aAAA;IACEC,SAAS,EAAEjI,MAAM,CAACqI,UAAW;IAC7BD,GAAG,EAAEvF,OAAQ;IACbyF,KAAK,EACH;MACE,cAAc,EAAElF;IAClB;EACD,GAEA,CAAC,CAAC,EAAE,CAAC,CAAC,CAACU,GAAG,CAAC,CAACtB,CAAC,EAAE2C,CAAC,kBACf1F,KAAA,CAAAuI,aAAA;IACEzB,EAAE,EAAE,QAAQpB,CAAC,EAAG;IAChB8C,SAAS,EAAE,GAAGjI,MAAM,CAACuI,WAAW,IAC9BpD,CAAC,GAAGnF,MAAM,CAACwI,cAAc,GAAG,EAAE,IAC5BpE,QAAQ,KAAK,eAAe,GAAGpE,MAAM,CAACyI,cAAc,GAAG,EAAE,EAAG;IAChEL,GAAG,EAAGA,GAA0B,IAAMrF,QAAQ,CAACuE,OAAO,CAACnC,CAAC,CAAC,GAAGiD,GAAM;IAClEM,GAAG,EAAE,QAAQvD,CAAC;EAAG,gBAEjB1F,KAAA,CAAAuI,aAAA;IACEzB,EAAE,EAAE,WAAWpB,CAAC,EAAG;IACnB8C,SAAS,EAAEjI,MAAM,CAAC2I,OAAQ;IAC1B,oBAAkB,iBAAiBxD,CAAC;EAAG,gBAEvC1F,KAAA,CAAAuI,aAAA;IACEzB,EAAE,EAAE,WAAWpB,CAAC,EAAG;IACnB8C,SAAS,EAAE,GAAGjI,MAAM,CAAC4I,OAAO,IAC1BpI,gBAAgB,CACdiC,iBAAiB,CACf2B,QAAQ,EACRM,IACF,CAAC,CACF,IAAI,EAAE,EACN;IACH,oBAAkB,iBAAiBS,CAAC,EAAG;IACvCmD,KAAK,EAAEjG,UAAU,CAAC+B,QAAQ,IAAI,WAAW,EAAEM,IAAI;EAAE,gBAEjDjF,KAAA,CAAAuI,aAAA;IACEzB,EAAE,EAAE,WAAWpB,CAAC,EAAG;IACnB8C,SAAS,EAAE,GAAGjI,MAAM,CAAC6I,OAAO,IAC1BrI,gBAAgB,CACdiC,iBAAiB,CACf2B,QAAQ,EACRM,IACF,CAAC,CACF,IAAI,EAAE,EACN;IACH,oBAAkB,eAAeS,CAAC;EAAG,CACjC,CACH,CACF,CAAC,eACN1F,KAAA,CAAAuI,aAAA;IAAKzB,EAAE,EAAC,SAAS;IAAC0B,SAAS,EAAEjI,MAAM,CAAC8I;EAAQ,GAAC,kBAExC,CACF,CACN,CACE,CAAC,eACNrJ,KAAA,CAAAuI,aAAA;IAAKC,SAAS,EAAEjI,MAAM,CAAC+I;EAAO,gBAC5BtJ,KAAA,CAAAuI,aAAA;IAAKC,SAAS,EAAEjI,MAAM,CAACgJ;EAAe,gBACpCvJ,KAAA,CAAAuI,aAAA,CAACjI,WAAW;IACVkJ,QAAQ,EAAGC,KAAK,IAAK;MACnB,MAAMtE,KAAmB,GAAGsE,KAAK,CAACC,MAAM,CAACvE,KAAK;MAC9CrB,eAAe,CAACqB,KAAK,CAAC;IACxB,CAAE;IACFA,KAAK,EAAEtB,YAAa;IACpB8F,OAAO,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,YAAY,CAAE;IAC7CnB,SAAS,EAAEjI,MAAM,CAACqJ;EAAW,CAC9B,CAAC,eACF5J,KAAA,CAAAuI,aAAA,CAACjI,WAAW;IACVkJ,QAAQ,EAAGC,KAAK,IAAK;MACnB,MAAMtE,KAAwB,GAAGsE,KAAK,CAACC,MAAM,CAACvE,KAAK;MACnDnB,gBAAgB,CAACmB,KAAK,CAAC;IACzB,CAAE;IACFA,KAAK,EAAEpB,aAAc;IACrB4F,OAAO,GAAAxG,aAAA,GACLc,YAAY,CAACU,QAAQ,CAAoB,cAAAxB,aAAA,GAAzCA,aAAA,CAA2CqB,KAAK,qBAAhDrB,aAAA,CACI0G,IACL;IACDrB,SAAS,EAAEjI,MAAM,CAACqJ;EAAW,CAC9B,CAAC,eACF5J,KAAA,CAAAuI,aAAA,CAACjI,WAAW;IACVkJ,QAAQ,EAAGC,KAAK,IAAK;MACnB,MAAMtE,KAAK,GAAGsE,KAAK,CAACC,MAAM,CAACvE,KAAK;MAChCH,WAAW,CAACG,KAAK,CAAC;MAClB,IACE,CAAClB,YAAY,CAACkB,KAAK,CAAoB,CAACZ,MAAM,CAACR,aAAa,CAAC,EAC7D;QACAC,gBAAgB,CACdC,YAAY,CAACkB,KAAK,CAAoB,CAACX,KAAK,CAACqF,IAAI,CAAE,CAAC,CACtD,CAAC;MACH;MACAnF,OAAO,CACLhE,sBAAsB,CACnBuD,YAAY,CAACkB,KAAK,CAAoB,CAACZ,MAAM,CAC5CR,aAAa,CACd,IACC,CAAC,CAAC,EACJF,YACF,CACF,CAAC;IACH,CAAE;IACFsB,KAAK,EAAER,QAAS;IAChBgF,OAAO,EACLzF,MAAM,CAACW,IAAI,CAACZ,YAAY,CAAC,CAACI,GAAG,CAAExB,IAAI,IAAK,CACtCA,IAAI,EACJ+B,qBAAqB,CAACkF,QAAQ,CAACjH,IAAuB,CAAC,CACxD,CACF;IACD2F,SAAS,EAAEjI,MAAM,CAACqJ;EAAW,CAC9B,CACE,CAAC,eACN5J,KAAA,CAAAuI,aAAA;IAAKC,SAAS,EAAEjI,MAAM,CAACwJ;EAAS,GAC7B7F,MAAM,CAAC8F,OAAO,CAACzF,MAAM,CAACR,aAAa,CAAE,CAAC,CACpCkG,IAAI,CAAC,CAAAC,KAAA,EAAAC,KAAA,KAAc;IAAA,IAAb,CAAC7B,CAAC,CAAC,GAAA4B,KAAA;IAAA,IAAE,CAACE,CAAC,CAAC,GAAAD,KAAA;IACb,IAAI7B,CAAC,KAAK,UAAU,IAAK8B,CAAC,KAAK,UAAU,IAAI9B,CAAC,KAAK,OAAQ,EAAE;MAC3D,OAAO,CAAC,CAAC;IACX;IACA,IAAI8B,CAAC,KAAK,aAAa,EAAE;MACvB,OAAO,CAAC,CAAC;IACX;IACA,OAAO,CAAC;EACV,CAAC,CAAC,CACD/F,GAAG,CAAC,CAAAgG,KAAA,EAAuB3E,CAAC;IAAA,IAAvB,CAAC7C,IAAI,EAAEyH,YAAY,CAAC,GAAAD,KAAA;IAAA,oBACxBrK,KAAA,CAAAuI,aAAA,CAAClI,OAAO,EAAAkK,QAAA;MACNtB,GAAG,EAAE,eAAevD,CAAC;IAAG,GACnB4E,YAAY;MACjBnF,KAAK,EAAEF,IAAI,CAACpC,IAAI,CAAE;MAClB2H,KAAK,EAAE3H,IAAK;MACZ2G,QAAQ,EAAEA,CAACiB,EAAE,EAAEtF,KAAK,KAAKD,mBAAmB,CAACrC,IAAI,EAAEsC,KAAK;IAAE,EAC3D,CAAC;EAAA,CACH,CACA,CACF,CACF,CAAC;AAEV,CAAC","ignoreList":[]}

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

@@ -33,7 +33,6 @@ export const Entrance = () => {
     // Animate
     animationGroup.current = getWebAnimation(el.id, {
       id: '',
-      type: 'TimeAnimationOptions',
       namedEffect: {
         id: '',
         type: name,

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

@@ -1 +1 @@
-{"version":3,"names":["React","getPresets","CONFIG","Control","NumberInput","SelectInput","styles","mapSchemaToDefaultData","schemaMapper","getWebAnimation","entranceAnimations","defs","title","Entrance","compRef","useRef","animationGroup","schemaEditor","setSchemaEditor","useState","useEffect","setData","animations","animName","Object","fromEntries","entrance","concat","entranceLegacy","map","preset","name","schema","implementedAnimations","keys","filter","animationName","animateText","el","_ref","_animationGroup$curre","duration","delay","easing","params","current","cancel","id","type","namedEffect","fill","iterations","play","setAnimName","rotation","setRotation","data","handleControlChange","value","currentData","createElement","className","stage","components","component","ref","style","transform","background","globalControls","label","min","max","step","onChange","event","target","valueAsNumber","options","mainSelect","includes","controls","entries","sort","_ref2","_ref3","a","b","_ref4","i","controlProps","_extends","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","getPresets","CONFIG","Control","NumberInput","SelectInput","styles","mapSchemaToDefaultData","schemaMapper","getWebAnimation","entranceAnimations","defs","title","Entrance","compRef","useRef","animationGroup","schemaEditor","setSchemaEditor","useState","useEffect","setData","animations","animName","Object","fromEntries","entrance","concat","entranceLegacy","map","preset","name","schema","implementedAnimations","keys","filter","animationName","animateText","el","_ref","_animationGroup$curre","duration","delay","easing","params","current","cancel","id","namedEffect","type","fill","iterations","play","setAnimName","rotation","setRotation","data","handleControlChange","value","currentData","createElement","className","stage","components","component","ref","style","transform","background","globalControls","label","min","max","step","onChange","event","target","valueAsNumber","options","mainSelect","includes","controls","entries","sort","_ref2","_ref3","a","b","_ref4","i","controlProps","_extends","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/esm/playground/animationsMotionMouse.stories.js

@@ -38,7 +38,6 @@ export const MouseParallax = () => {
       const factory = defs[animName];
       const animate = factory({
         id: '',
-        type: 'ScrubAnimationOptions',
         transitionDuration,
         transitionEasing,
         namedEffect: {

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

@@ -1 +1 @@
-{"version":3,"names":["React","getPresets","CONFIG","mapSchemaToDefaultData","schemaMapper","MouseComponent","COMPONENTS_TYPE","styles","mouseAnimations","defs","NumberInput","SelectInput","BooleanInput","Control","Pointer","title","MouseParallax","compRefs","useRef","stageRef","pointerRef","multipleComponents","setMultipleComponents","useState","schemaEditor","setSchemaEditor","isDevMode","setIsDevMode","currentComponentType","setCurrentComponentType","square","animations","Object","fromEntries","mouse","undefined","map","preset","name","schema","implementedAnimations","keys","filter","animationName","animName","setAnimName","rotation","setRotation","data","setData","useEffect","transitionDuration","transitionEasing","namedEffect","effects","current","element","factory","animate","id","type","scenes","_ref","animation","effect","_scene","progress","centeredToTarget","target","start","destroy","forEach","_ref2","_","cancel","handleControlChange","value","currentData","onCompTypeChange","event","createElement","className","stage","mouseStage","ref","selectWrapper","onChange","entries","_ref3","key","components","Array","from","length","i","globalControls","label","e","checked","min","max","step","valueAsNumber","options","mainSelect","includes","controls","sort","_ref4","_ref5","a","b","_ref6","controlProps","_extends","_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","getPresets","CONFIG","mapSchemaToDefaultData","schemaMapper","MouseComponent","COMPONENTS_TYPE","styles","mouseAnimations","defs","NumberInput","SelectInput","BooleanInput","Control","Pointer","title","MouseParallax","compRefs","useRef","stageRef","pointerRef","multipleComponents","setMultipleComponents","useState","schemaEditor","setSchemaEditor","isDevMode","setIsDevMode","currentComponentType","setCurrentComponentType","square","animations","Object","fromEntries","mouse","undefined","map","preset","name","schema","implementedAnimations","keys","filter","animationName","animName","setAnimName","rotation","setRotation","data","setData","useEffect","transitionDuration","transitionEasing","namedEffect","effects","current","element","factory","animate","id","type","scenes","_ref","animation","effect","_scene","progress","centeredToTarget","target","start","destroy","forEach","_ref2","_","cancel","handleControlChange","value","currentData","onCompTypeChange","event","createElement","className","stage","mouseStage","ref","selectWrapper","onChange","entries","_ref3","key","components","Array","from","length","i","globalControls","label","e","checked","min","max","step","valueAsNumber","options","mainSelect","includes","controls","sort","_ref4","_ref5","a","b","_ref6","controlProps","_extends","_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/esm/playground/animationsMotionOngoing.stories.js

@@ -37,7 +37,6 @@ export const Ongoing = () => {
     // Animate
     animationGroup.current = getWebAnimation(el.id, {
       id: '',
-      type: 'TimeAnimationOptions',
       namedEffect: {
         id: '',
         type: name,

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

@@ -1 +1 @@
-{"version":3,"names":["React","getPresets","CONFIG","Control","NumberInput","SelectInput","styles","mapSchemaToDefaultData","schemaMapper","ongoingAnimations","defs","getWebAnimation","title","Ongoing","compRef","useRef","animationGroup","schemaEditor","setSchemaEditor","useState","animations","Object","fromEntries","ongoing","undefined","map","preset","name","schema","implementedAnimations","keys","filter","animationName","animName","setAnimName","rotation","setRotation","data","setData","useEffect","animateText","el","_ref","_animationGroup$curre","duration","delay","easing","params","current","cancel","id","type","namedEffect","iterations","play","handleControlChange","value","currentData","document","body","dataset","blockLevelContainer","createElement","className","stage","components","component","ref","style","background","globalControls","label","min","max","step","onChange","event","target","valueAsNumber","options","mainSelect","includes","controls","entries","sort","_ref2","_ref3","a","b","_ref4","i","controlProps","_extends","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":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,MAAM,QAAQ,kBAAkB;AAErD,SAASC,OAAO,EAAEC,WAAW,EAAEC,WAAW,QAAQ,YAAY;AAC9D,OAAOC,MAAM,MAAM,0BAA0B;AAC7C,SAASC,sBAAsB,EAAEC,YAAY,QAAQ,qBAAqB;AAU1E,SAASC,iBAAiB,IAAIC,IAAI,QAAQ,oBAAoB;AAC9D,SAASC,eAAe,QAAQ,WAAW;AAK3C,eAAe;EACbC,KAAK,EAAE;AACT,CAAC;AAED,OAAO,MAAMC,OAAsB,GAAGA,CAAA,KAAM;EAC1C,MAAMC,OAAO,GAAGd,KAAK,CAACe,MAAM,CAAiB,IAAI,CAAC;EAClD,MAAMC,cAAc,GAAGhB,KAAK,CAACe,MAAM,CAAiB,CAAC;EAErD,MAAM,CAACE,YAAY,EAAEC,eAAe,CAAC,GACnClB,KAAK,CAACmB,QAAQ,CAAe,YAAY,CAAC;EAE5C,MAAMC,UAAU,GAAGC,MAAM,CAACC,WAAW,CACnCrB,UAAU,CAACC,MAAM,CAACM,YAAY,CAACS,YAAY,CAAC,CAAC,CAACM,OAAO,EAAEC,SAAS,EAAE,IAAI,CAAC,CAACC,GAAG,CACxEC,MAAM,IAAK,CAACA,MAAM,CAACC,IAAI,EAAED,MAAM,CAACE,MAAM,CACzC,CACF,CAAkE;EAClE,MAAMC,qBAAqB,GAAGR,MAAM,CAACS,IAAI,CAACpB,IAAI,CAAC,CAACqB,MAAM,CACnDC,aAAa,IAAKZ,UAAU,CAACY,aAAa,CAC7C,CAAsB;EAEtB,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAGlC,KAAK,CAACmB,QAAQ,CAC5CU,qBAAqB,CAAC,CAAC,CACzB,CAAC;EAED,MAAM,CAACM,QAAQ,EAAEC,WAAW,CAAC,GAAGpC,KAAK,CAACmB,QAAQ,CAAS,CAAC,CAAC;EAEzD,MAAMS,MAAM,GAAGR,UAAU,CAACa,QAAQ,CAAC,IAAI,CAAC,CAAC;EACzC,MAAM,CAACI,IAAI,EAAEC,OAAO,CAAC,GAAGtC,KAAK,CAACmB,QAAQ,CACpCZ,sBAAsB,CAACqB,MAAM,EAAEX,YAAY,CAC7C,CAAC;EAEDjB,KAAK,CAACuC,SAAS,CAAC,MAAM;IACpBD,OAAO,CAAC/B,sBAAsB,CAACa,UAAU,CAACa,QAAQ,CAAC,EAAEhB,YAAY,CAAC,CAAC;IACnE;EACF,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EAElB,SAASuB,WAAWA,CAClBC,EAAiC,EACjCd,IAAY,EAAAe,IAAA,EAEZ;IAAA,IAAAC,qBAAA;IAAA,IADA;MAAEC,QAAQ,GAAG,IAAI;MAAEC,KAAK,GAAG,CAAC;MAAEC,MAAM,GAAG,QAAQ;MAAE,GAAGC;IAAO,CAAC,GAAAL,IAAA;IAE5D;IACA,CAAAC,qBAAA,GAAA3B,cAAc,CAACgC,OAAO,aAAtBL,qBAAA,CAAwBM,MAAM,CAAC,CAAC;;IAEhC;IACAjC,cAAc,CAACgC,OAAO,GAAGrC,eAAe,CAAC8B,EAAE,CAACS,EAAE,EAAE;MAC9CA,EAAE,EAAE,EAAE;MACNC,IAAI,EAAE,sBAAsB;MAC5BC,WAAW,EAAE;QAAEF,EAAE,EAAE,EAAE;QAAEC,IAAI,EAAExB,IAAI;QAAE,GAAGoB;MAAO,CAAqB;MAClED,MAAM,EAAEA,MAA8B;MACtCF,QAAQ;MACRC,KAAK;MACLQ,UAAU,EAAE;IACd,CAAC,CAAmB;IACpBrC,cAAc,CAACgC,OAAO,CAACM,IAAI,CAAC,CAAC;EAC/B;EAEA,SAASC,mBAAmBA,CAAC5B,IAAY,EAAE6B,KAAU,EAAE;IACrDlB,OAAO,CAAEmB,WAAW,KAAM;MACxB,GAAGA,WAAW;MACd,CAAC9B,IAAI,GAAG6B;IACV,CAAC,CAAC,CAAC;EACL;EAEAxD,KAAK,CAACuC,SAAS,CAAC,MAAM;IACpBmB,QAAQ,CAACC,IAAI,CAAEC,OAAO,CAACC,mBAAmB,GAAG,MAAM;EACrD,CAAC,EAAE,EAAE,CAAC;EAEN,oBACE7D,KAAA,CAAA8D,aAAA;IAAKC,SAAS,EAAEzD,MAAM,CAAC0D;EAAM,gBAC3BhE,KAAA,CAAA8D,aAAA;IAAKC,SAAS,EAAEzD,MAAM,CAAC2D;EAAW,gBAChCjE,KAAA,CAAA8D,aAAA;IACEZ,EAAE,EAAC,OAAO;IACVa,SAAS,EAAEzD,MAAM,CAAC4D,SAAU;IAC5BC,GAAG,EAAErD,OAAQ;IACbsD,KAAK,EACH;MACE,iBAAiB,EAAE,GAAGjC,QAAQ,KAAK;MACnC,YAAY,EAAE,GAAGA,QAAQ,KAAK;MAC9BkC,UAAU,EAAE;IACd;EACD,GACF,SAEI,CACF,CAAC,eAENrE,KAAA,CAAA8D,aAAA;IAAKC,SAAS,EAAEzD,MAAM,CAACgE;EAAe,gBACpCtE,KAAA,CAAA8D,aAAA,CAAC1D,WAAW;IACVmE,KAAK,EAAC,UAAU;IAChBf,KAAK,EAAErB,QAAS;IAChBqC,GAAG,EAAE,CAAE;IACPC,GAAG,EAAE,GAAI;IACTC,IAAI,EAAE,CAAE;IACRC,QAAQ,EAAGC,KAAK,IAAKxC,WAAW,CAACwC,KAAK,CAACC,MAAM,CAACC,aAAa;EAAE,CAC9D,CAAC,eACF9E,KAAA,CAAA8D,aAAA,CAACzD,WAAW;IACVsE,QAAQ,EAAGC,KAAK,IAAK;MACnB,MAAMpB,KAAmB,GAAGoB,KAAK,CAACC,MAAM,CAACrB,KAAK;MAC9CtC,eAAe,CAACsC,KAAK,CAAC;IACxB,CAAE;IACFA,KAAK,EAAEvC,YAAa;IACpB8D,OAAO,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,YAAY,CAAE;IAC7ChB,SAAS,EAAEzD,MAAM,CAAC0E;EAAW,CAC9B,CAAC,eACFhF,KAAA,CAAA8D,aAAA,CAACzD,WAAW;IACVsE,QAAQ,EAAGC,KAAK,IAAK;MACnB,MAAMpB,KAAK,GAAGoB,KAAK,CAACC,MAAM,CAACrB,KAAK;MAChCtB,WAAW,CAACsB,KAAK,CAAC;MAClBlB,OAAO,CACL/B,sBAAsB,CACpBa,UAAU,CAACoC,KAAK,CAAoB,IAAI,CAAC,CAAC,EAC1CvC,YACF,CACF,CAAC;IACH,CAAE;IACFuC,KAAK,EAAEvB,QAAS;IAChB8C,OAAO,EACL1D,MAAM,CAACS,IAAI,CAACV,UAAU,CAAC,CAACK,GAAG,CAAEE,IAAI,IAAK,CACpCA,IAAI,EACJE,qBAAqB,CAACoD,QAAQ,CAACtD,IAAuB,CAAC,CACxD,CACF;IACDoC,SAAS,EAAEzD,MAAM,CAAC0E;EAAW,CAC9B,CACE,CAAC,eACNhF,KAAA,CAAA8D,aAAA;IAAKC,SAAS,EAAEzD,MAAM,CAAC4E;EAAS,GAC7B7D,MAAM,CAAC8D,OAAO,CAACvD,MAAM,CAAC,CACpBwD,IAAI,CAAC,CAAAC,KAAA,EAAAC,KAAA,KAAc;IAAA,IAAb,CAACC,CAAC,CAAC,GAAAF,KAAA;IAAA,IAAE,CAACG,CAAC,CAAC,GAAAF,KAAA;IACb,IAAIC,CAAC,KAAK,UAAU,IAAKC,CAAC,KAAK,UAAU,IAAID,CAAC,KAAK,OAAQ,EAAE;MAC3D,OAAO,CAAC,CAAC;IACX;IACA,IAAIC,CAAC,KAAK,aAAa,EAAE;MACvB,OAAO,CAAC,CAAC;IACX;IACA,OAAO,CAAC;EACV,CAAC,CAAC,CACD/D,GAAG,CAAC,CAAAgE,KAAA,EAAuBC,CAAC;IAAA,IAAvB,CAAC/D,IAAI,EAAEgE,YAAY,CAAC,GAAAF,KAAA;IAAA,oBACxBzF,KAAA,CAAA8D,aAAA,CAAC3D,OAAO,EAAAyF,QAAA;MACNC,GAAG,EAAE,eAAeH,CAAC;IAAG,GACpBC,YAAY;MAChBnC,KAAK,EAAEnB,IAAI,CAACV,IAAI,CAAE;MAClB4C,KAAK,EAAE5C,IAAK;MACZgD,QAAQ,EAAEA,CAACmB,EAAE,EAAEtC,KAAK,KAAKD,mBAAmB,CAAC5B,IAAI,EAAE6B,KAAK;IAAE,EAC3D,CAAC;EAAA,CACH,CAAC,eACJxD,KAAA,CAAA8D,aAAA;IAAKC,SAAS,EAAEzD,MAAM,CAACyF;EAAQ,gBAC7B/F,KAAA,CAAA8D,aAAA;IACEC,SAAS,EAAEzD,MAAM,CAAC0F,aAAc;IAChCC,OAAO,EAAEA,CAAA,KAAMzD,WAAW,CAAC1B,OAAO,CAACkC,OAAO,EAAGf,QAAQ,EAAEI,IAAI;EAAE,GAC9D,SAEO,CACL,CACF,CACF,CAAC;AAEV,CAAC","ignoreList":[]}
+{"version":3,"names":["React","getPresets","CONFIG","Control","NumberInput","SelectInput","styles","mapSchemaToDefaultData","schemaMapper","ongoingAnimations","defs","getWebAnimation","title","Ongoing","compRef","useRef","animationGroup","schemaEditor","setSchemaEditor","useState","animations","Object","fromEntries","ongoing","undefined","map","preset","name","schema","implementedAnimations","keys","filter","animationName","animName","setAnimName","rotation","setRotation","data","setData","useEffect","animateText","el","_ref","_animationGroup$curre","duration","delay","easing","params","current","cancel","id","namedEffect","type","iterations","play","handleControlChange","value","currentData","document","body","dataset","blockLevelContainer","createElement","className","stage","components","component","ref","style","background","globalControls","label","min","max","step","onChange","event","target","valueAsNumber","options","mainSelect","includes","controls","entries","sort","_ref2","_ref3","a","b","_ref4","i","controlProps","_extends","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":[]}

package/dist/esm/playground/animationsMotionScroll.stories.js

@@ -62,7 +62,6 @@ export const Scroll = () => {
     } = _ref;
     const animationInstanceParams = [el.id, {
       id: '',
-      type: 'ScrubAnimationOptions',
       easing,
       namedEffect: {
         id: '',

package/dist/esm/playground/animationsMotionScroll.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Scroll","ScrollLib","getPresets","CONFIG","Control","NumberInput","SelectInput","styles","mapSchemaToDefaultData","schemaMapper","rangeMapper","getScrubScene","getWebAnimation","scrollAnimations","defs","title","_animations","compRef","useRef","stageRef","animationScene","animationGroup","scroll","schemaEditor","setSchemaEditor","useState","selectedRange","setSelectedRange","animations","Object","fromEntries","map","preset","name","schema","range","implementedAnimations","keys","filter","animationName","animName","setAnimName","rotation","setRotation","attachment","setAttachment","data","setData","useEffect","_compRef$current","current","getAnimations","forEach","a","cancel","animateText","console","log","toggleAttachment","el","_ref","duration","delay","start","end","easing","params","animationInstanceParams","id","type","namedEffect","fill","iterations","startOffset","offset","value","endOffset","trigger","componentId","element","window","ViewTimeline","_animationGroup$curre","_scroll$current","destroy","root","observeViewportEntry","scenes","handleControlChange","currentData","createElement","className","stage","scrollStage","ref","attachButton","onClick","components","style","component","background","panels","globalControls","label","min","max","step","onChange","event","target","valueAsNumber","options","mainSelect","enum","includes","controls","entries","_ref2","_ref3","i","controlProps","_extends","key","_e"],"sources":["../../../src/playground/animationsMotionScroll.stories.tsx"],"sourcesContent":["import React from 'react';\nimport { Scroll as ScrollLib } from 'fizban';\n\nimport { getPresets, CONFIG } from '@wix/effects-kit';\n\nimport { Control, NumberInput, SelectInput } from './controls';\nimport styles from './playground.module.scss';\nimport {\n  mapSchemaToDefaultData,\n  schemaMapper,\n  rangeMapper,\n} from './playground-common';\nimport { AnimationGroup, getScrubScene, getWebAnimation } from '../motion';\nimport { scrollAnimations as defs } from '../library/scroll';\n\nimport type { SchemaEditor } from './playground-common';\nimport type { CSSProperties } from 'react';\nimport type { Meta } from '@wix/yoshi-storybook-dependencies';\nimport type {\n  EffectConfig,\n  ScrollEffectConfig,\n  EffectPreset,\n  OneOfScrollEffects,\n  AllEffectsNames,\n  OneOfEffects,\n} from '@wix/effects-kit';\nimport type {\n  AnimationOptions,\n  EffectScrollRange,\n  ScrollAnimation,\n  TriggerVariant,\n} from '../types';\n\nexport default {\n  title: 'Animation Playground/Scroll',\n} as Meta;\n\nexport const Scroll: React.FC<any> = () => {\n  const compRef = React.useRef<HTMLDivElement>(null);\n  const stageRef = React.useRef<HTMLDivElement>(null);\n  const animationScene = React.useRef<ReturnType<typeof getScrubScene>>();\n  const animationGroup = React.useRef<AnimationGroup>();\n  const scroll = React.useRef<typeof ScrollLib>();\n\n  const [schemaEditor, setSchemaEditor] =\n    React.useState<SchemaEditor>('responsive');\n\n  const [selectedRange, setSelectedRange] =\n    React.useState<EffectScrollRange>('in');\n\n  const animations = Object.fromEntries(\n    getPresets(\n      CONFIG[schemaMapper[schemaEditor]][rangeMapper[selectedRange]],\n    ).map((preset: EffectPreset) => [\n      preset.name,\n      {\n        schema: preset.schema,\n        range: (preset as ScrollEffectConfig<OneOfScrollEffects>).range,\n      },\n    ]),\n  ) as Record<AllEffectsNames, ScrollEffectConfig<OneOfScrollEffects>>;\n\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].schema ||\n    {}) as EffectConfig<OneOfEffects>['schema'];\n  const [attachment, setAttachment] = React.useState<string>('scroll');\n\n  const [data, setData] = React.useState<Record<string, any>>(\n    mapSchemaToDefaultData(schema),\n  );\n\n  React.useEffect(() => {\n    setData(\n      mapSchemaToDefaultData(\n        animations[animName as AllEffectsNames]\n          .schema as EffectConfig<OneOfEffects>['schema'],\n        schemaEditor,\n      ),\n    );\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [schemaEditor, selectedRange]);\n\n  React.useEffect(() => {\n    compRef.current?.getAnimations().forEach((a) => {\n      a.cancel();\n    }); // removing all previously selected animations\n    if (compRef.current) {\n      animateText(compRef.current, animName, data);\n    }\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [data, animName, rotation, animationGroup]);\n\n  console.log('animation', animations[animName]);\n  console.log('data', data);\n\n  function toggleAttachment() {\n    // Change value of CSS variable\n    attachment === 'fixed' ? setAttachment('scroll') : setAttachment('fixed');\n  }\n\n  function animateText(\n    el: HTMLElement,\n    name: string,\n    {\n      duration = 1000,\n      delay = 0,\n      start = 0,\n      end = 100,\n      range = selectedRange,\n      easing = '',\n      ...params\n    }: {\n      duration?: number;\n      delay?: number;\n      start?: number;\n      end?: number;\n      easing?: string;\n      range?: EffectScrollRange;\n    },\n  ) {\n    const animationInstanceParams: [\n      string,\n      AnimationOptions,\n      TriggerVariant & { element?: HTMLElement },\n    ] = [\n      el.id,\n      {\n        id: '',\n        type: 'ScrubAnimationOptions',\n        easing,\n        namedEffect: {\n          id: '',\n          type: name,\n          range,\n          ...params,\n        } as ScrollAnimation,\n        fill: 'both',\n        iterations: 1,\n        startOffset: {\n          name: 'cover',\n          offset: {\n            value: start,\n            type: 'percentage',\n          },\n        },\n        endOffset: {\n          name: 'cover',\n          offset: {\n            value: end,\n            type: 'percentage',\n          },\n        },\n      },\n      { trigger: 'view-progress', componentId: el.id, element: el, id: '' },\n    ];\n\n    if (window.ViewTimeline) {\n      // Clear\n      animationGroup.current?.cancel();\n      // Animate\n      animationGroup.current = getWebAnimation(\n        ...animationInstanceParams,\n      ) as AnimationGroup;\n    } else {\n      // Create Scene\n      animationScene.current = getScrubScene(...animationInstanceParams);\n\n      console.log(start, end, params);\n\n      // Clear\n      scroll.current?.destroy();\n\n      // Animate\n      scroll.current = new ScrollLib({\n        root: stageRef.current,\n        observeViewportEntry: false,\n        // observeViewportResize: false,\n        scenes: [animationScene.current],\n      });\n      scroll.current.start();\n    }\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} ${styles.scrollStage}`} ref={stageRef}>\n      <button className={`${styles.attachButton}`} onClick={toggleAttachment}>\n        Toggle Attachment\n      </button>\n      <div\n        className={styles.components}\n        style={{ '--attachment': attachment } as CSSProperties}\n      >\n        <div\n          id=\"comp1\"\n          className={styles.component}\n          ref={compRef}\n          style={\n            {\n              '--comp-rotate-z': `${rotation}deg`,\n              background: 'MediumVioletRed',\n            } as CSSProperties\n          }\n        >\n          Scroll\n        </div>\n      </div>\n      <div className={styles.panels}>\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              // 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: EffectScrollRange = event.target.value;\n              setSelectedRange(value);\n            }}\n            value={selectedRange}\n            options={\n              animations[animName as AllEffectsNames]?.range\n                ?.enum as EffectScrollRange[]\n            }\n            className={styles.mainSelect}\n          />\n          <SelectInput\n            onChange={(event) => {\n              const value: AllEffectsNames = event.target.value;\n              setAnimName(value);\n              setData(\n                mapSchemaToDefaultData(\n                  (animations[value].schema ||\n                    {}) as EffectConfig<OneOfEffects>['schema'],\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          {/* <Control\n            default=\"in\"\n            type=\"string\"\n            label=\"type\"\n            enum={['in', 'out', 'continuous']}\n            value={data.range}\n            onChange={(_e, value) =>\n              handleControlChange('range', value as EffectRangeAll)\n            }\n          /> */}\n          {/* {data.range !== 'continuous' && (\n            <Control\n              default={50}\n              type=\"number\"\n              label={offsetType}\n              min={0}\n              max={100}\n              step={1}\n              value={data[offsetType]}\n              onChange={(_e, value) => handleControlChange(offsetType, value)}\n            />\n          )} */}\n          {Object.entries(schema)\n            .filter(\n              ([name]) => !['duration', 'delay', 'allowReplay'].includes(name),\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>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,MAAM,IAAIC,SAAS,QAAQ,QAAQ;AAE5C,SAASC,UAAU,EAAEC,MAAM,QAAQ,kBAAkB;AAErD,SAASC,OAAO,EAAEC,WAAW,EAAEC,WAAW,QAAQ,YAAY;AAC9D,OAAOC,MAAM,MAAM,0BAA0B;AAC7C,SACEC,sBAAsB,EACtBC,YAAY,EACZC,WAAW,QACN,qBAAqB;AAC5B,SAAyBC,aAAa,EAAEC,eAAe,QAAQ,WAAW;AAC1E,SAASC,gBAAgB,IAAIC,IAAI,QAAQ,mBAAmB;AAoB5D,eAAe;EACbC,KAAK,EAAE;AACT,CAAC;AAED,OAAO,MAAMf,MAAqB,GAAGA,CAAA,KAAM;EAAA,IAAAgB,WAAA;EACzC,MAAMC,OAAO,GAAGlB,KAAK,CAACmB,MAAM,CAAiB,IAAI,CAAC;EAClD,MAAMC,QAAQ,GAAGpB,KAAK,CAACmB,MAAM,CAAiB,IAAI,CAAC;EACnD,MAAME,cAAc,GAAGrB,KAAK,CAACmB,MAAM,CAAmC,CAAC;EACvE,MAAMG,cAAc,GAAGtB,KAAK,CAACmB,MAAM,CAAiB,CAAC;EACrD,MAAMI,MAAM,GAAGvB,KAAK,CAACmB,MAAM,CAAmB,CAAC;EAE/C,MAAM,CAACK,YAAY,EAAEC,eAAe,CAAC,GACnCzB,KAAK,CAAC0B,QAAQ,CAAe,YAAY,CAAC;EAE5C,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GACrC5B,KAAK,CAAC0B,QAAQ,CAAoB,IAAI,CAAC;EAEzC,MAAMG,UAAU,GAAGC,MAAM,CAACC,WAAW,CACnC5B,UAAU,CACRC,MAAM,CAACM,YAAY,CAACc,YAAY,CAAC,CAAC,CAACb,WAAW,CAACgB,aAAa,CAAC,CAC/D,CAAC,CAACK,GAAG,CAAEC,MAAoB,IAAK,CAC9BA,MAAM,CAACC,IAAI,EACX;IACEC,MAAM,EAAEF,MAAM,CAACE,MAAM;IACrBC,KAAK,EAAGH,MAAM,CAA4CG;EAC5D,CAAC,CACF,CACH,CAAoE;EAEpE,MAAMC,qBAAqB,GAAGP,MAAM,CAACQ,IAAI,CAACvB,IAAI,CAAC,CAACwB,MAAM,CACnDC,aAAa,IAAKX,UAAU,CAACW,aAAa,CAC7C,CAAsB;EAEtB,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAG1C,KAAK,CAAC0B,QAAQ,CAC5CW,qBAAqB,CAAC,CAAC,CACzB,CAAC;EAED,MAAM,CAACM,QAAQ,EAAEC,WAAW,CAAC,GAAG5C,KAAK,CAAC0B,QAAQ,CAAS,CAAC,CAAC;EAEzD,MAAMS,MAAM,GAAIN,UAAU,CAACY,QAAQ,CAAC,CAACN,MAAM,IACzC,CAAC,CAA0C;EAC7C,MAAM,CAACU,UAAU,EAAEC,aAAa,CAAC,GAAG9C,KAAK,CAAC0B,QAAQ,CAAS,QAAQ,CAAC;EAEpE,MAAM,CAACqB,IAAI,EAAEC,OAAO,CAAC,GAAGhD,KAAK,CAAC0B,QAAQ,CACpCjB,sBAAsB,CAAC0B,MAAM,CAC/B,CAAC;EAEDnC,KAAK,CAACiD,SAAS,CAAC,MAAM;IACpBD,OAAO,CACLvC,sBAAsB,CACpBoB,UAAU,CAACY,QAAQ,CAAoB,CACpCN,MAAM,EACTX,YACF,CACF,CAAC;IACD;EACF,CAAC,EAAE,CAACA,YAAY,EAAEG,aAAa,CAAC,CAAC;EAEjC3B,KAAK,CAACiD,SAAS,CAAC,MAAM;IAAA,IAAAC,gBAAA;IACpB,CAAAA,gBAAA,GAAAhC,OAAO,CAACiC,OAAO,aAAfD,gBAAA,CAAiBE,aAAa,CAAC,CAAC,CAACC,OAAO,CAAEC,CAAC,IAAK;MAC9CA,CAAC,CAACC,MAAM,CAAC,CAAC;IACZ,CAAC,CAAC,CAAC,CAAC;IACJ,IAAIrC,OAAO,CAACiC,OAAO,EAAE;MACnBK,WAAW,CAACtC,OAAO,CAACiC,OAAO,EAAEV,QAAQ,EAAEM,IAAI,CAAC;IAC9C;;IAEA;EACF,CAAC,EAAE,CAACA,IAAI,EAAEN,QAAQ,EAAEE,QAAQ,EAAErB,cAAc,CAAC,CAAC;EAE9CmC,OAAO,CAACC,GAAG,CAAC,WAAW,EAAE7B,UAAU,CAACY,QAAQ,CAAC,CAAC;EAC9CgB,OAAO,CAACC,GAAG,CAAC,MAAM,EAAEX,IAAI,CAAC;EAEzB,SAASY,gBAAgBA,CAAA,EAAG;IAC1B;IACAd,UAAU,KAAK,OAAO,GAAGC,aAAa,CAAC,QAAQ,CAAC,GAAGA,aAAa,CAAC,OAAO,CAAC;EAC3E;EAEA,SAASU,WAAWA,CAClBI,EAAe,EACf1B,IAAY,EAAA2B,IAAA,EAiBZ;IAAA,IAhBA;MACEC,QAAQ,GAAG,IAAI;MACfC,KAAK,GAAG,CAAC;MACTC,KAAK,GAAG,CAAC;MACTC,GAAG,GAAG,GAAG;MACT7B,KAAK,GAAGT,aAAa;MACrBuC,MAAM,GAAG,EAAE;MACX,GAAGC;IAQL,CAAC,GAAAN,IAAA;IAED,MAAMO,uBAIL,GAAG,CACFR,EAAE,CAACS,EAAE,EACL;MACEA,EAAE,EAAE,EAAE;MACNC,IAAI,EAAE,uBAAuB;MAC7BJ,MAAM;MACNK,WAAW,EAAE;QACXF,EAAE,EAAE,EAAE;QACNC,IAAI,EAAEpC,IAAI;QACVE,KAAK;QACL,GAAG+B;MACL,CAAoB;MACpBK,IAAI,EAAE,MAAM;MACZC,UAAU,EAAE,CAAC;MACbC,WAAW,EAAE;QACXxC,IAAI,EAAE,OAAO;QACbyC,MAAM,EAAE;UACNC,KAAK,EAAEZ,KAAK;UACZM,IAAI,EAAE;QACR;MACF,CAAC;MACDO,SAAS,EAAE;QACT3C,IAAI,EAAE,OAAO;QACbyC,MAAM,EAAE;UACNC,KAAK,EAAEX,GAAG;UACVK,IAAI,EAAE;QACR;MACF;IACF,CAAC,EACD;MAAEQ,OAAO,EAAE,eAAe;MAAEC,WAAW,EAAEnB,EAAE,CAACS,EAAE;MAAEW,OAAO,EAAEpB,EAAE;MAAES,EAAE,EAAE;IAAG,CAAC,CACtE;IAED,IAAIY,MAAM,CAACC,YAAY,EAAE;MAAA,IAAAC,qBAAA;MACvB;MACA,CAAAA,qBAAA,GAAA7D,cAAc,CAAC6B,OAAO,aAAtBgC,qBAAA,CAAwB5B,MAAM,CAAC,CAAC;MAChC;MACAjC,cAAc,CAAC6B,OAAO,GAAGtC,eAAe,CACtC,GAAGuD,uBACL,CAAmB;IACrB,CAAC,MAAM;MAAA,IAAAgB,eAAA;MACL;MACA/D,cAAc,CAAC8B,OAAO,GAAGvC,aAAa,CAAC,GAAGwD,uBAAuB,CAAC;MAElEX,OAAO,CAACC,GAAG,CAACM,KAAK,EAAEC,GAAG,EAAEE,MAAM,CAAC;;MAE/B;MACA,CAAAiB,eAAA,GAAA7D,MAAM,CAAC4B,OAAO,aAAdiC,eAAA,CAAgBC,OAAO,CAAC,CAAC;;MAEzB;MACA9D,MAAM,CAAC4B,OAAO,GAAG,IAAIjD,SAAS,CAAC;QAC7BoF,IAAI,EAAElE,QAAQ,CAAC+B,OAAO;QACtBoC,oBAAoB,EAAE,KAAK;QAC3B;QACAC,MAAM,EAAE,CAACnE,cAAc,CAAC8B,OAAO;MACjC,CAAC,CAAC;MACF5B,MAAM,CAAC4B,OAAO,CAACa,KAAK,CAAC,CAAC;IACxB;EACF;EAEA,SAASyB,mBAAmBA,CAACvD,IAAY,EAAE0C,KAAU,EAAE;IACrD5B,OAAO,CAAE0C,WAAW,KAAM;MACxB,GAAGA,WAAW;MACd,CAACxD,IAAI,GAAG0C;IACV,CAAC,CAAC,CAAC;EACL;EAEA,oBACE5E,KAAA,CAAA2F,aAAA;IAAKC,SAAS,EAAE,GAAGpF,MAAM,CAACqF,KAAK,IAAIrF,MAAM,CAACsF,WAAW,EAAG;IAACC,GAAG,EAAE3E;EAAS,gBACrEpB,KAAA,CAAA2F,aAAA;IAAQC,SAAS,EAAE,GAAGpF,MAAM,CAACwF,YAAY,EAAG;IAACC,OAAO,EAAEtC;EAAiB,GAAC,mBAEhE,CAAC,eACT3D,KAAA,CAAA2F,aAAA;IACEC,SAAS,EAAEpF,MAAM,CAAC0F,UAAW;IAC7BC,KAAK,EAAE;MAAE,cAAc,EAAEtD;IAAW;EAAmB,gBAEvD7C,KAAA,CAAA2F,aAAA;IACEtB,EAAE,EAAC,OAAO;IACVuB,SAAS,EAAEpF,MAAM,CAAC4F,SAAU;IAC5BL,GAAG,EAAE7E,OAAQ;IACbiF,KAAK,EACH;MACE,iBAAiB,EAAE,GAAGxD,QAAQ,KAAK;MACnC0D,UAAU,EAAE;IACd;EACD,GACF,QAEI,CACF,CAAC,eACNrG,KAAA,CAAA2F,aAAA;IAAKC,SAAS,EAAEpF,MAAM,CAAC8F;EAAO,gBAC5BtG,KAAA,CAAA2F,aAAA;IAAKC,SAAS,EAAEpF,MAAM,CAAC+F;EAAe,gBACpCvG,KAAA,CAAA2F,aAAA,CAACrF,WAAW;IACVkG,KAAK,EAAC,UAAU;IAChB5B,KAAK,EAAEjC,QAAS;IAChB8D,GAAG,EAAE,CAAE;IACPC,GAAG,EAAE,GAAI;IACTC,IAAI,EAAE,CAAE;IACRC,QAAQ,EAAGC,KAAK,IAAKjE,WAAW,CAACiE,KAAK,CAACC,MAAM,CAACC,aAAa;EAAE,CAC9D,CAAC,eACF/G,KAAA,CAAA2F,aAAA,CAACpF,WAAW;IACVqG,QAAQ,EAAGC,KAAK,IAAK;MACnB,MAAMjC,KAAmB,GAAGiC,KAAK,CAACC,MAAM,CAAClC,KAAK;MAC9CnD,eAAe,CAACmD,KAAK,CAAC;MACtB;MACA;IACF,CAAE;IACFA,KAAK,EAAEpD,YAAa;IACpBwF,OAAO,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,YAAY,CAAE;IAC7CpB,SAAS,EAAEpF,MAAM,CAACyG;EAAW,CAC9B,CAAC,eACFjH,KAAA,CAAA2F,aAAA,CAACpF,WAAW;IACVqG,QAAQ,EAAGC,KAAK,IAAK;MACnB,MAAMjC,KAAwB,GAAGiC,KAAK,CAACC,MAAM,CAAClC,KAAK;MACnDhD,gBAAgB,CAACgD,KAAK,CAAC;IACzB,CAAE;IACFA,KAAK,EAAEjD,aAAc;IACrBqF,OAAO,GAAA/F,WAAA,GACLY,UAAU,CAACY,QAAQ,CAAoB,cAAAxB,WAAA,GAAvCA,WAAA,CAAyCmB,KAAK,qBAA9CnB,WAAA,CACIiG,IACL;IACDtB,SAAS,EAAEpF,MAAM,CAACyG;EAAW,CAC9B,CAAC,eACFjH,KAAA,CAAA2F,aAAA,CAACpF,WAAW;IACVqG,QAAQ,EAAGC,KAAK,IAAK;MACnB,MAAMjC,KAAsB,GAAGiC,KAAK,CAACC,MAAM,CAAClC,KAAK;MACjDlC,WAAW,CAACkC,KAAK,CAAC;MAClB5B,OAAO,CACLvC,sBAAsB,CACnBoB,UAAU,CAAC+C,KAAK,CAAC,CAACzC,MAAM,IACvB,CAAC,CAAC,EACJX,YACF,CACF,CAAC;IACH,CAAE;IACFoD,KAAK,EAAEnC,QAAS;IAChBuE,OAAO,EACLlF,MAAM,CAACQ,IAAI,CAACT,UAAU,CAAC,CAACG,GAAG,CAAEE,IAAI,IAAK,CACpCA,IAAI,EACJG,qBAAqB,CAAC8E,QAAQ,CAACjF,IAAuB,CAAC,CACxD,CACF;IACD0D,SAAS,EAAEpF,MAAM,CAACyG;EAAW,CAC9B,CACE,CAAC,eACNjH,KAAA,CAAA2F,aAAA;IAAKC,SAAS,EAAEpF,MAAM,CAAC4G;EAAS,GAuB7BtF,MAAM,CAACuF,OAAO,CAAClF,MAAM,CAAC,CACpBI,MAAM,CACL+E,KAAA;IAAA,IAAC,CAACpF,IAAI,CAAC,GAAAoF,KAAA;IAAA,OAAK,CAAC,CAAC,UAAU,EAAE,OAAO,EAAE,aAAa,CAAC,CAACH,QAAQ,CAACjF,IAAI,CAAC;EAAA,CAClE,CAAC,CACAF,GAAG,CAAC,CAAAuF,KAAA,EAAuBC,CAAC;IAAA,IAAvB,CAACtF,IAAI,EAAEuF,YAAY,CAAC,GAAAF,KAAA;IAAA,oBACxBvH,KAAA,CAAA2F,aAAA,CAACtF,OAAO,EAAAqH,QAAA;MACNC,GAAG,EAAE,eAAeH,CAAC;IAAG,GACpBC,YAAY;MAChB7C,KAAK,EAAE7B,IAAI,CAACb,IAAI,CAAE;MAClBsE,KAAK,EAAEtE,IAAK;MACZ0E,QAAQ,EAAEA,CAACgB,EAAE,EAAEhD,KAAK,KAAKa,mBAAmB,CAACvD,IAAI,EAAE0C,KAAK;IAAE,EAC3D,CAAC;EAAA,CACH,CACA,CACF,CACF,CAAC;AAEV,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Scroll","ScrollLib","getPresets","CONFIG","Control","NumberInput","SelectInput","styles","mapSchemaToDefaultData","schemaMapper","rangeMapper","getScrubScene","getWebAnimation","scrollAnimations","defs","title","_animations","compRef","useRef","stageRef","animationScene","animationGroup","scroll","schemaEditor","setSchemaEditor","useState","selectedRange","setSelectedRange","animations","Object","fromEntries","map","preset","name","schema","range","implementedAnimations","keys","filter","animationName","animName","setAnimName","rotation","setRotation","attachment","setAttachment","data","setData","useEffect","_compRef$current","current","getAnimations","forEach","a","cancel","animateText","console","log","toggleAttachment","el","_ref","duration","delay","start","end","easing","params","animationInstanceParams","id","namedEffect","type","fill","iterations","startOffset","offset","value","endOffset","trigger","componentId","element","window","ViewTimeline","_animationGroup$curre","_scroll$current","destroy","root","observeViewportEntry","scenes","handleControlChange","currentData","createElement","className","stage","scrollStage","ref","attachButton","onClick","components","style","component","background","panels","globalControls","label","min","max","step","onChange","event","target","valueAsNumber","options","mainSelect","enum","includes","controls","entries","_ref2","_ref3","i","controlProps","_extends","key","_e"],"sources":["../../../src/playground/animationsMotionScroll.stories.tsx"],"sourcesContent":["import React from 'react';\nimport { Scroll as ScrollLib } from 'fizban';\n\nimport { getPresets, CONFIG } from '@wix/effects-kit';\n\nimport { Control, NumberInput, SelectInput } from './controls';\nimport styles from './playground.module.scss';\nimport {\n  mapSchemaToDefaultData,\n  schemaMapper,\n  rangeMapper,\n} from './playground-common';\nimport { AnimationGroup, getScrubScene, getWebAnimation } from '../motion';\nimport { scrollAnimations as defs } from '../library/scroll';\n\nimport type { SchemaEditor } from './playground-common';\nimport type { CSSProperties } from 'react';\nimport type { Meta } from '@wix/yoshi-storybook-dependencies';\nimport type {\n  EffectConfig,\n  ScrollEffectConfig,\n  EffectPreset,\n  OneOfScrollEffects,\n  AllEffectsNames,\n  OneOfEffects,\n} from '@wix/effects-kit';\nimport type {\n  AnimationOptions,\n  EffectScrollRange,\n  ScrollAnimation,\n  TriggerVariant,\n} from '../types';\n\nexport default {\n  title: 'Animation Playground/Scroll',\n} as Meta;\n\nexport const Scroll: React.FC<any> = () => {\n  const compRef = React.useRef<HTMLDivElement>(null);\n  const stageRef = React.useRef<HTMLDivElement>(null);\n  const animationScene = React.useRef<ReturnType<typeof getScrubScene>>();\n  const animationGroup = React.useRef<AnimationGroup>();\n  const scroll = React.useRef<typeof ScrollLib>();\n\n  const [schemaEditor, setSchemaEditor] =\n    React.useState<SchemaEditor>('responsive');\n\n  const [selectedRange, setSelectedRange] =\n    React.useState<EffectScrollRange>('in');\n\n  const animations = Object.fromEntries(\n    getPresets(\n      CONFIG[schemaMapper[schemaEditor]][rangeMapper[selectedRange]],\n    ).map((preset: EffectPreset) => [\n      preset.name,\n      {\n        schema: preset.schema,\n        range: (preset as ScrollEffectConfig<OneOfScrollEffects>).range,\n      },\n    ]),\n  ) as Record<AllEffectsNames, ScrollEffectConfig<OneOfScrollEffects>>;\n\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].schema ||\n    {}) as EffectConfig<OneOfEffects>['schema'];\n  const [attachment, setAttachment] = React.useState<string>('scroll');\n\n  const [data, setData] = React.useState<Record<string, any>>(\n    mapSchemaToDefaultData(schema),\n  );\n\n  React.useEffect(() => {\n    setData(\n      mapSchemaToDefaultData(\n        animations[animName as AllEffectsNames]\n          .schema as EffectConfig<OneOfEffects>['schema'],\n        schemaEditor,\n      ),\n    );\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [schemaEditor, selectedRange]);\n\n  React.useEffect(() => {\n    compRef.current?.getAnimations().forEach((a) => {\n      a.cancel();\n    }); // removing all previously selected animations\n    if (compRef.current) {\n      animateText(compRef.current, animName, data);\n    }\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [data, animName, rotation, animationGroup]);\n\n  console.log('animation', animations[animName]);\n  console.log('data', data);\n\n  function toggleAttachment() {\n    // Change value of CSS variable\n    attachment === 'fixed' ? setAttachment('scroll') : setAttachment('fixed');\n  }\n\n  function animateText(\n    el: HTMLElement,\n    name: string,\n    {\n      duration = 1000,\n      delay = 0,\n      start = 0,\n      end = 100,\n      range = selectedRange,\n      easing = '',\n      ...params\n    }: {\n      duration?: number;\n      delay?: number;\n      start?: number;\n      end?: number;\n      easing?: string;\n      range?: EffectScrollRange;\n    },\n  ) {\n    const animationInstanceParams: [\n      string,\n      AnimationOptions,\n      TriggerVariant & { element?: HTMLElement },\n    ] = [\n      el.id,\n      {\n        id: '',\n        easing,\n        namedEffect: {\n          id: '',\n          type: name,\n          range,\n          ...params,\n        } as ScrollAnimation,\n        fill: 'both',\n        iterations: 1,\n        startOffset: {\n          name: 'cover',\n          offset: {\n            value: start,\n            type: 'percentage',\n          },\n        },\n        endOffset: {\n          name: 'cover',\n          offset: {\n            value: end,\n            type: 'percentage',\n          },\n        },\n      },\n      { trigger: 'view-progress', componentId: el.id, element: el, id: '' },\n    ];\n\n    if (window.ViewTimeline) {\n      // Clear\n      animationGroup.current?.cancel();\n      // Animate\n      animationGroup.current = getWebAnimation(\n        ...animationInstanceParams,\n      ) as AnimationGroup;\n    } else {\n      // Create Scene\n      animationScene.current = getScrubScene(...animationInstanceParams);\n\n      console.log(start, end, params);\n\n      // Clear\n      scroll.current?.destroy();\n\n      // Animate\n      scroll.current = new ScrollLib({\n        root: stageRef.current,\n        observeViewportEntry: false,\n        // observeViewportResize: false,\n        scenes: [animationScene.current],\n      });\n      scroll.current.start();\n    }\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} ${styles.scrollStage}`} ref={stageRef}>\n      <button className={`${styles.attachButton}`} onClick={toggleAttachment}>\n        Toggle Attachment\n      </button>\n      <div\n        className={styles.components}\n        style={{ '--attachment': attachment } as CSSProperties}\n      >\n        <div\n          id=\"comp1\"\n          className={styles.component}\n          ref={compRef}\n          style={\n            {\n              '--comp-rotate-z': `${rotation}deg`,\n              background: 'MediumVioletRed',\n            } as CSSProperties\n          }\n        >\n          Scroll\n        </div>\n      </div>\n      <div className={styles.panels}>\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              // 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: EffectScrollRange = event.target.value;\n              setSelectedRange(value);\n            }}\n            value={selectedRange}\n            options={\n              animations[animName as AllEffectsNames]?.range\n                ?.enum as EffectScrollRange[]\n            }\n            className={styles.mainSelect}\n          />\n          <SelectInput\n            onChange={(event) => {\n              const value: AllEffectsNames = event.target.value;\n              setAnimName(value);\n              setData(\n                mapSchemaToDefaultData(\n                  (animations[value].schema ||\n                    {}) as EffectConfig<OneOfEffects>['schema'],\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          {/* <Control\n            default=\"in\"\n            type=\"string\"\n            label=\"type\"\n            enum={['in', 'out', 'continuous']}\n            value={data.range}\n            onChange={(_e, value) =>\n              handleControlChange('range', value as EffectRangeAll)\n            }\n          /> */}\n          {/* {data.range !== 'continuous' && (\n            <Control\n              default={50}\n              type=\"number\"\n              label={offsetType}\n              min={0}\n              max={100}\n              step={1}\n              value={data[offsetType]}\n              onChange={(_e, value) => handleControlChange(offsetType, value)}\n            />\n          )} */}\n          {Object.entries(schema)\n            .filter(\n              ([name]) => !['duration', 'delay', 'allowReplay'].includes(name),\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>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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","ignoreList":[]}