@gem-sdk/core 1.29.4 → 1.30.0

package/dist/cjs/index.js

@@ -34,6 +34,7 @@ var isBrowser = require('./helpers/is-browser.js');
 var isSafari = require('./helpers/is-safari.js');
 var isEmptyChildren = require('./helpers/is-empty-children.js');
 var filterToolbarPreview = require('./helpers/filter-toolbar-preview.js');
+var animations = require('./helpers/animations.js');
 var makeStyle = require('./helpers/make-style.js');
 var normalizeBuilderData = require('./helpers/normalize-builder-data.js');
 var prefetchQueries = require('./helpers/prefetch-queries.js');
@@ -89,6 +90,7 @@ var useSwatchesOptions = require('./hooks/useSwatchesOptions.js');
 var useInitialSwatchesOptions = require('./hooks/useInitialSwatchesOptions.js');
 var shop$1 = require('./types/shop.js');
 var globalStyle = require('./types/global-style.js');
+var animations$1 = require('./types/animations.js');
 var getCollection = require('./helpers/queries/get-collection.js');
 var getProduct = require('./helpers/queries/get-product.js');
 var getProductBySlug = require('./helpers/queries/get-product-by-slug.js');
@@ -154,6 +156,7 @@ exports.isBrowser = isBrowser.default;
 exports.isSafari = isSafari.default;
 exports.isEmptyChildren = isEmptyChildren.isEmptyChildren;
 exports.filterToolbarPreview = filterToolbarPreview.filterToolbarPreview;
+exports.animations = animations.animations;
 exports.makeAspectRatio = makeStyle.makeAspectRatio;
 exports.makeGlobalSizeWidthResponsive = makeStyle.makeGlobalSizeWidthResponsive;
 exports.makeHeight = makeStyle.makeHeight;
@@ -312,6 +315,30 @@ exports.useInitialSwatchesOptions = useInitialSwatchesOptions.default;
 exports.ShopType = shop$1;
 exports.OptionNormalStyle = globalStyle.OptionNormalStyle;
 exports.OptionSpecialStyle = globalStyle.OptionSpecialStyle;
+Object.defineProperty(exports, 'AnimationDirectionType', {
+	enumerable: true,
+	get: function () { return animations$1.AnimationDirectionType; }
+});
+Object.defineProperty(exports, 'AnimationEasingType', {
+	enumerable: true,
+	get: function () { return animations$1.AnimationEasingType; }
+});
+Object.defineProperty(exports, 'AnimationSetting', {
+	enumerable: true,
+	get: function () { return animations$1.AnimationSetting; }
+});
+Object.defineProperty(exports, 'AnimationTriggerType', {
+	enumerable: true,
+	get: function () { return animations$1.AnimationTriggerType; }
+});
+Object.defineProperty(exports, 'AnimationType', {
+	enumerable: true,
+	get: function () { return animations$1.AnimationType; }
+});
+Object.defineProperty(exports, 'AnimationZoomDirectionType', {
+	enumerable: true,
+	get: function () { return animations$1.AnimationZoomDirectionType; }
+});
 exports.calculateFirstProduct = getCollection.calculateFirstProduct;
 exports.getCollection = getCollection.getCollection;
 exports.fetchMedias = getProduct.fetchMedias;

package/dist/cjs/types/animations.js

@@ -0,0 +1,47 @@
+'use strict';
+
+exports.AnimationType = void 0;
+(function(AnimationType) {
+    AnimationType["Fade"] = 'fade';
+    AnimationType["Slide"] = 'slide';
+    AnimationType["Zoom"] = 'zoom';
+    AnimationType["Shake"] = 'shake';
+    AnimationType["None"] = 'none';
+})(exports.AnimationType || (exports.AnimationType = {}));
+exports.AnimationSetting = void 0;
+(function(AnimationSetting) {
+    AnimationSetting["Loop"] = 'loop';
+    AnimationSetting["Scale"] = 'scale';
+    AnimationSetting["Delay"] = 'delay';
+    AnimationSetting["Easing"] = 'easing';
+    AnimationSetting["Speed"] = 'speed';
+    AnimationSetting["IsFade"] = 'isFade';
+    AnimationSetting["Distance"] = 'distance';
+    AnimationSetting["Intensity"] = 'intensity';
+    AnimationSetting["Direction"] = 'direction';
+    AnimationSetting["ZoomDirection"] = 'zoomDirection';
+})(exports.AnimationSetting || (exports.AnimationSetting = {}));
+exports.AnimationDirectionType = void 0;
+(function(AnimationDirectionType) {
+    AnimationDirectionType["Left"] = 'left';
+    AnimationDirectionType["Right"] = 'right';
+    AnimationDirectionType["Up"] = 'up';
+    AnimationDirectionType["Down"] = 'down';
+})(exports.AnimationDirectionType || (exports.AnimationDirectionType = {}));
+exports.AnimationTriggerType = void 0;
+(function(AnimationTriggerType) {
+    AnimationTriggerType["Appear"] = 'appear';
+    AnimationTriggerType["Hover"] = 'hover';
+})(exports.AnimationTriggerType || (exports.AnimationTriggerType = {}));
+exports.AnimationZoomDirectionType = void 0;
+(function(AnimationZoomDirectionType) {
+    AnimationZoomDirectionType["In"] = 'in';
+    AnimationZoomDirectionType["Out"] = 'out';
+})(exports.AnimationZoomDirectionType || (exports.AnimationZoomDirectionType = {}));
+exports.AnimationEasingType = void 0;
+(function(AnimationEasingType) {
+    AnimationEasingType["Ease"] = 'ease';
+    AnimationEasingType["EaseIn"] = 'ease-in';
+    AnimationEasingType["EaseOut"] = 'ease-out';
+    AnimationEasingType["Linear"] = 'linear';
+})(exports.AnimationEasingType || (exports.AnimationEasingType = {}));

package/dist/esm/components/ComponentWrapperPreview.js

@@ -4,6 +4,7 @@ import { composeAdvanceStyle } from '../helpers/compose-advance-style.js';
 import { disableWrap, excludeApplyStyle } from './constant.js';
 import RenderCustomCode from './RenderCustomCode.js';
 import { ComponentToolbarPreview } from './ComponentToolbarPreview.js';
+import useApplyAnimation from '../hooks/animation/useApplyAnimation.js';
 
 const ComponentWrapperPreview = ({ children, ...props })=>{
     useEffect(()=>{
@@ -17,6 +18,9 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
     }, [
         props.uid
     ]);
+    useApplyAnimation({
+        props
+    });
     if (props.type === 'section') {
         return null;
     }

package/dist/esm/components/Render.liquid.js

@@ -1,3 +1,4 @@
+import { makeStyleResponsive } from '../helpers/make-style.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'zustand';
@@ -9,7 +10,7 @@ import '../hooks/useCartUI.js';
 import 'react-transition-group';
 import '@gem-sdk/core';
 import { RenderIf, template } from '../helpers/render.js';
-import '../helpers/convert.js';
+import { baseAssetURL, isLocalEnv } from '../helpers/convert.js';
 import { composeAdvanceStyle } from '../helpers/compose-advance-style.js';
 import { disableWrap, customRenderChildren } from './constant.js';
 
@@ -166,6 +167,7 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
         const { cssCode, jsCode } = RenderCustomCode(item);
         if (cssCode) liquid += cssCode;
         if (jsCode) liquid += jsCode;
+        liquid = appendAnimation(item, liquid);
         return {
             liquid,
             extraFiles: customProps.extraFiles
@@ -195,13 +197,52 @@ const RenderCustomCode = (item)=>{
         jsCode
     };
 };
+const appendAnimation = (props, liquid)=>{
+    const { advanced, tag } = props;
+    const { animation } = advanced ?? {};
+    const enableAnimation = animation?.desktop?.enabled || animation?.tablet?.enabled || animation?.mobile?.enabled;
+    if (!enableAnimation || !animation?.desktop?.triggerConfig) return liquid;
+    const getAnimationType = (settings, type)=>{
+        return settings?.triggerConfig?.[type]?.animation ?? 'none';
+    };
+    const getSettingsByDevice = (device)=>{
+        if (device === 'desktop') return animation?.desktop;
+        else if (device === 'tablet') return animation?.tablet ?? animation?.desktop;
+        else if (device === 'mobile') return animation?.mobile ?? animation?.tablet ?? animation?.desktop;
+        return animation?.desktop;
+    };
+    const getInitOpacity = (device)=>+!(getSettingsByDevice(device)?.enabled && getAnimationType(getSettingsByDevice(device), 'appear') !== 'none');
+    const opacityObject = {
+        desktop: getInitOpacity('desktop'),
+        tablet: getInitOpacity('tablet'),
+        mobile: getInitOpacity('mobile')
+    };
+    const inheritParentStyle = {
+        all: tag === 'Section' ? '' : 'inherit'
+    };
+    return template`
+  ${RenderIf(isLocalEnv, `<script src="{{ 'gp-animation.js' | asset_url }}" defer="defer"></script>`, `<script src="${baseAssetURL}/assets/gp-animation.js" defer="defer"></script>`)}
+  <gp-animation
+    gp-data='${JSON.stringify({
+        config: animation,
+        tag
+    })}'
+    style="${{
+        ...inheritParentStyle
+    }}"
+  >
+    <div style="${{
+        ...makeStyleResponsive('op', opacityObject)
+    }}">${liquid}</div>
+  </gp-animation>
+  `;
+};
 const RenderChildren = (props)=>{
     const data = Render(props);
     // Append to prop parent
     for(const key in data.extraFiles){
         if (Object.prototype.hasOwnProperty.call(data.extraFiles, key)) {
-            const value = data.extraFiles[key];
-            props.customProps.extraFiles[key] = value;
+            props.customProps.extraFiles[key] = data.extraFiles[key];
         }
     }
     // Fix limit 256kb
@@ -210,7 +251,7 @@ const RenderChildren = (props)=>{
     if (Math.ceil(size / 1024) >= 180) {
         const fileName = `gp-section-snippet-${props.uid}`;
         props.customProps.extraFiles[fileName] = data.liquid;
-        return `{% render '${fileName}', product: product, variant: variant, product_form_id: product_form_id, productSelectedVariant: productSelectedVariant  %}`;
+        return `{% render '${fileName}', product: product, variant: variant, product_form_id: product_form_id, productSelectedVariant: productSelectedVariant, form: form  %}`;
     }
     return data.liquid;
 };
@@ -227,7 +268,7 @@ const WrapRenderChildren = ({ uid, customProps }, codes)=>{
                 if (Math.ceil(size / 1024) >= 180) {
                     const fileName = `gp-section-snippet-${uid + i}`;
                     customProps.extraFiles[fileName] = code;
-                    liquid += `{% render '${fileName}', product: product, variant: variant, product_form_id: product_form_id, productSelectedVariant: productSelectedVariant  %}`;
+                    liquid += `{% render '${fileName}', product: product, variant: variant, product_form_id: product_form_id, productSelectedVariant: productSelectedVariant, form: form  %}`;
                 } else {
                     liquid += code;
                 }

package/dist/esm/components/constant.js

@@ -32,7 +32,8 @@ const disableWrap = [
     'Product',
     'ProductImages',
     'ProductImagesV2',
-    'Sticky'
+    'Sticky',
+    'Heading'
 ];
 const customRenderChildren = [
     'Accordion',

package/dist/esm/helpers/animations.js

@@ -0,0 +1,211 @@
+const EASING = {
+    ease: 'cubic-bezier(0.46,0.03,0.52,0.96)',
+    'ease-in': 'cubic-bezier(0.55,0.08,0.68,0.53)',
+    'ease-out': 'cubic-bezier(0.46,0.03,0.52,0.96)',
+    linear: 'linear'
+};
+const animations = ()=>{
+    const normalizeOptions = (options)=>{
+        const cloneOptions = JSON.parse(JSON.stringify(options));
+        const numberMember = [
+            'delay',
+            'speed',
+            'scale',
+            'intensity'
+        ];
+        numberMember.forEach((keyName)=>{
+            if (!cloneOptions?.[keyName]) return;
+            if (keyName === 'scale') {
+                if (!cloneOptions?.zoomDirection) throw new TypeError(`zoomDirection not found on zoom preset`);
+                const [i1, i2] = cloneOptions?.scale?.in ?? [
+                    1,
+                    1
+                ];
+                const [o1, o2] = cloneOptions?.scale?.out ?? [
+                    1,
+                    1
+                ];
+                cloneOptions[keyName] = {
+                    in: [
+                        Number(i1) / 100,
+                        Number(i2) / 100
+                    ],
+                    out: [
+                        Number(o1) / 100,
+                        Number(o2) / 100
+                    ]
+                };
+                return;
+            }
+            const num = Number(cloneOptions?.[keyName]);
+            if (keyName === 'delay') cloneOptions[keyName] = num * 1000;
+            else cloneOptions[keyName] = num;
+            if (!isFinite(num)) throw new TypeError(`${keyName} must be a number`);
+        });
+        return cloneOptions;
+    };
+    const slide = (target, options)=>{
+        const normalizedOptions = normalizeOptions(options);
+        const { direction, distance } = normalizedOptions;
+        const coordinate = [
+            'left',
+            'right'
+        ].includes(direction ?? '') ? 'X' : 'Y';
+        const isNeg = [
+            'left',
+            'down'
+        ].includes(direction ?? '') ? '-' : '';
+        const preset = [
+            {
+                opacity: 0,
+                transform: `translate${coordinate}(${isNeg}${distance ?? 50}%)`
+            },
+            {
+                opacity: 1,
+                transform: `translate${coordinate}(0)`
+            }
+        ];
+        return generateAnimationInstance(target, preset, {
+            ...generateOptions(normalizedOptions, 500)
+        });
+    };
+    const fade = (target, options)=>{
+        const normalizedOptions = normalizeOptions(options);
+        const preset = [
+            {
+                opacity: 0
+            },
+            {
+                opacity: 1
+            }
+        ];
+        return generateAnimationInstance(target, preset, {
+            ...generateOptions(normalizedOptions, 500)
+        });
+    };
+    const generateOptions = (options, defaultDuration)=>{
+        const convertSpeedToDuration = (speed)=>{
+            if (!speed) return defaultDuration;
+            return 1.5 / speed * 1000;
+        };
+        const { loop, delay, speed, easing } = options ?? {};
+        const duration = convertSpeedToDuration(speed);
+        const actualDelay = delay ?? 0;
+        const actualDuration = loop ? duration + actualDelay : duration;
+        return {
+            iterations: loop ? Infinity : 1,
+            duration: actualDuration,
+            delay: actualDelay,
+            easing: EASING[easing ?? 'linear']
+        };
+    };
+    const zoom = (target, options)=>{
+        const normalizedOptions = normalizeOptions(options);
+        const { scale, zoomDirection, isFade } = normalizedOptions;
+        const [i1, i2] = scale.in;
+        const [o1, o2] = scale.out;
+        const zoomInPreset = [
+            {
+                transform: `scale(${i1}, ${i1})`,
+                opacity: isFade ? 0 : 1
+            },
+            {
+                transform: `scale(${i2 ?? 1.2}, ${i2 ?? 1.2})`,
+                opacity: 1
+            }
+        ];
+        const zoomOutPreset = [
+            {
+                transform: `scale(${o1}, ${o1})`,
+                opacity: isFade ? 0 : 1
+            },
+            {
+                transform: `scale(${o2 ?? 0.8}, ${o2 ?? 0.8})`,
+                opacity: 1
+            }
+        ];
+        const zoomPreset = zoomDirection === 'in' ? zoomInPreset : zoomOutPreset;
+        return generateAnimationInstance(target, zoomPreset, {
+            ...generateOptions(normalizedOptions, 700)
+        });
+    };
+    const generateLoopDelayEffect = (keyframes, delay, duration)=>{
+        if (!delay) return keyframes;
+        const offset = delay / duration;
+        const keyframe = [
+            ...keyframes
+        ].pop();
+        return [
+            ...keyframes,
+            {
+                ...keyframe,
+                offset: 1 - offset
+            }
+        ];
+    };
+    const shake = (target, options)=>{
+        const normalizedOptions = normalizeOptions(options);
+        const { intensity } = normalizedOptions ?? {};
+        const zeroIntensity = [
+            {
+                transform: 'translate3d(0, 0, 0)'
+            }
+        ];
+        const unitIntensity = [
+            {
+                transform: 'translate3d(4px, 0, 0)'
+            },
+            {
+                transform: 'translate3d(-4px, 0, 0)'
+            },
+            {
+                transform: 'translate3d(4px, 0, 0)'
+            }
+        ];
+        let keyframes = [];
+        Array.from(Array(intensity ?? 1).keys()).forEach(()=>{
+            keyframes = [
+                ...keyframes,
+                ...unitIntensity
+            ];
+        });
+        const shakePreset = [
+            {
+                transform: 'translate3d(-1px, 0, 0)'
+            },
+            {
+                transform: 'translate3d(2px, 0, 0)'
+            },
+            {
+                transform: 'translate3d(-4px, 0, 0)'
+            },
+            ...keyframes,
+            {
+                transform: 'translate3d(-4px, 0, 0)'
+            },
+            {
+                transform: 'translate3d(2px, 0, 0)'
+            },
+            {
+                transform: 'translate3d(-1px, 0, 0)'
+            }
+        ];
+        return generateAnimationInstance(target, intensity ? shakePreset : zeroIntensity, {
+            ...generateOptions(normalizedOptions ?? {}, 820)
+        });
+    };
+    const generateAnimationInstance = (target, effectPreset, options)=>{
+        const effect = new KeyframeEffect(target, options.iterations && options.iterations === 1 ? effectPreset : generateLoopDelayEffect(effectPreset, options?.delay ?? 0, (options?.duration) ?? 0), {
+            ...options
+        });
+        return new Animation(effect, document.timeline);
+    };
+    return {
+        zoom,
+        shake,
+        fade,
+        slide
+    };
+};
+
+export { animations };

package/dist/esm/hooks/animation/useAnimationActions.js

@@ -0,0 +1,37 @@
+import { useRef, useCallback } from 'react';
+
+const useAnimationActions = ()=>{
+    const listAnimations = useRef();
+    const setAnimation = useCallback((newListAnimations)=>{
+        listAnimations.current = newListAnimations;
+    }, [
+        listAnimations
+    ]);
+    const playAnimation = useCallback(()=>{
+        if (!listAnimations.current) return;
+        for (const animation of listAnimations.current){
+            animation.play();
+        }
+    }, []);
+    const cancelAnimation = useCallback(()=>{
+        if (!listAnimations.current) return;
+        for (const animation of listAnimations.current){
+            animation.cancel();
+        }
+    }, []);
+    const setAnimationOnFinish = useCallback((onFinish)=>{
+        if (!listAnimations.current) return;
+        for (const animation of listAnimations.current){
+            animation.onfinish = onFinish;
+        }
+    }, []);
+    return {
+        currentAnimation: listAnimations.current,
+        setAnimation,
+        playAnimation,
+        cancelAnimation,
+        setAnimationOnFinish
+    };
+};
+
+export { useAnimationActions };

package/dist/esm/hooks/animation/useAnimationConfig.js

@@ -0,0 +1,27 @@
+import { useMemo, useCallback } from 'react';
+import { useCurrentDevice } from '../use-current-device.js';
+
+const useAnimationConfig = (props)=>{
+    const currentDevice = useCurrentDevice();
+    const configByDevices = useMemo(()=>props?.advanced?.animation?.[currentDevice], [
+        currentDevice,
+        props?.advanced?.animation
+    ]);
+    const getAnimationConfig = useCallback(()=>{
+        const { trigger, triggerConfig } = configByDevices;
+        const { animation, setting } = triggerConfig[trigger];
+        return {
+            type: animation,
+            setting: setting[animation]
+        };
+    }, [
+        configByDevices
+    ]);
+    const isEnabledAnimation = configByDevices?.enabled;
+    return {
+        isEnabledAnimation,
+        getAnimationConfig
+    };
+};
+
+export { useAnimationConfig };

package/dist/esm/hooks/animation/useAnimationPreview.js

@@ -0,0 +1,29 @@
+import { useCallback } from 'react';
+
+const useAnimationPreview = ({ props, playAnimation, cancelAnimation, setAnimationOnFinish, setToolbarActive })=>{
+    const previewAnimation = useCallback((e)=>{
+        const { uid, isCancel } = e.detail;
+        if (props.uid !== uid) return;
+        cancelAnimation();
+        if (isCancel) {
+            setToolbarActive(true);
+            return;
+        }
+        playAnimation();
+        setToolbarActive(false);
+        setAnimationOnFinish(()=>{
+            setToolbarActive(true);
+        });
+    }, [
+        props.uid,
+        cancelAnimation,
+        playAnimation,
+        setToolbarActive,
+        setAnimationOnFinish
+    ]);
+    return {
+        previewAnimation
+    };
+};
+
+export { useAnimationPreview };

package/dist/esm/hooks/animation/useAnimationTarget.js

@@ -0,0 +1,118 @@
+import { useRef, useCallback } from 'react';
+import { useAnimationConfig } from './useAnimationConfig.js';
+
+const SPACING_ACTIVE_ATTRIBUTE = 'data-spacing';
+const TOOLBAR_ACTIVE_ATTRIBUTE = 'data-toolbar-active';
+const OUTLINE_ACTIVE_ATTRIBUTE = 'data-outline-active';
+const TOOLBAR_ADD_SECTION_ACTIVE_ATTRIBUTE = 'data-toolbar-add-active';
+const useAnimationTarget = (props)=>{
+    const { isEnabledAnimation } = useAnimationConfig(props);
+    const componentTag = props.tag;
+    const componentUid = props.uid;
+    const targets = useRef(null);
+    const targetObjects = useRef([]);
+    const setToolbarActive = (isActive)=>{
+        if (!targetObjects.current) return;
+        for (const item of targetObjects.current){
+            if (isActive) {
+                item.toolbar?.setAttribute(TOOLBAR_ACTIVE_ATTRIBUTE, 'true');
+                item.outline?.setAttribute(OUTLINE_ACTIVE_ATTRIBUTE, 'true');
+                item.spacing?.setAttribute(SPACING_ACTIVE_ATTRIBUTE, 'true');
+                item.addSectionTop?.setAttribute(TOOLBAR_ADD_SECTION_ACTIVE_ATTRIBUTE, 'true');
+                item.addSectionBottom?.setAttribute(TOOLBAR_ADD_SECTION_ACTIVE_ATTRIBUTE, 'true');
+            } else {
+                item.toolbar?.removeAttribute(TOOLBAR_ACTIVE_ATTRIBUTE);
+                item.outline?.removeAttribute(OUTLINE_ACTIVE_ATTRIBUTE);
+                item.spacing?.removeAttribute(SPACING_ACTIVE_ATTRIBUTE);
+                item.addSectionTop?.removeAttribute(TOOLBAR_ADD_SECTION_ACTIVE_ATTRIBUTE);
+                item.addSectionBottom?.removeAttribute(TOOLBAR_ADD_SECTION_ACTIVE_ATTRIBUTE);
+            }
+        }
+    };
+    const getSectionProperties = (target)=>{
+        const sectionAddTop = target.querySelector('[data-toolbar-add-top]');
+        const sectionAddBottom = target.querySelector('[data-toolbar-add-bottom]');
+        const sectionChild = Array.from(target.children);
+        const sectionToolbar = sectionChild.find((child)=>child.getAttribute('data-toolbar') !== null);
+        const sectionOutline = sectionChild.find((child)=>child.getAttribute('data-outline') !== null);
+        return {
+            sectionToolbar,
+            sectionOutline,
+            sectionAddTop,
+            sectionAddBottom
+        };
+    };
+    const getUpdatedTargetObjects = useCallback((targets)=>{
+        return targets.reduce((accumulator, $rootTarget)=>{
+            let addSectionTop = null;
+            let addSectionBottom = null;
+            let target = $rootTarget;
+            let toolbar = $rootTarget.querySelector('[data-toolbar][data-toolbar-active]');
+            let outline = $rootTarget.querySelector('[data-outline][data-outline-active]');
+            const targetChild = Array.from(target.children);
+            const spacing = targetChild.find((child)=>child.getAttribute('data-spacing') !== null);
+            switch(componentTag){
+                case 'Button':
+                case 'SubmitButton':
+                case 'ProductButton':
+                case 'DynamicCheckout':
+                    target = $rootTarget.querySelector('.gp-button-base');
+                    break;
+                case 'ProductProperties':
+                    target = $rootTarget.querySelector('input');
+                    break;
+                case 'Icon':
+                    target = $rootTarget.firstElementChild;
+                    break;
+                case 'ProductTag':
+                    target = $rootTarget?.children[0]?.children[0];
+                    break;
+                case 'Section':
+                    {
+                        target = $rootTarget;
+                        const { sectionOutline, sectionToolbar, sectionAddTop, sectionAddBottom } = getSectionProperties(target);
+                        outline = sectionOutline;
+                        toolbar = sectionToolbar;
+                        addSectionTop = sectionAddTop;
+                        addSectionBottom = sectionAddBottom;
+                        break;
+                    }
+                default:
+                    target = $rootTarget;
+            }
+            const newTargetObject = {
+                target,
+                toolbar,
+                outline,
+                spacing,
+                addSectionTop,
+                addSectionBottom
+            };
+            accumulator.push(newTargetObject);
+            return accumulator;
+        }, []);
+    }, [
+        componentTag
+    ]);
+    const initListOfTargets = useCallback(()=>{
+        if (!isEnabledAnimation) return;
+        if (!targets.current) {
+            targets.current = document.querySelectorAll(`[data-uid="${componentUid}"]`);
+        }
+        const targetsArray = Array.from(targets.current);
+        if (!targetsArray.length) return;
+        const updatedTargetObjects = getUpdatedTargetObjects(targetsArray);
+        targetObjects.current = updatedTargetObjects;
+    }, [
+        componentUid,
+        getUpdatedTargetObjects,
+        isEnabledAnimation
+    ]);
+    return {
+        targetObjects,
+        setToolbarActive,
+        initListOfTargets
+    };
+};
+
+export { useAnimationTarget };