fix: remove is-legacy check and improve element selection

webiny · Jan 12, 2023 · 6196d58 · 6196d58
1 parent 0e63d09
commit 6196d58
Showing 1 changed file with 15 additions and 17 deletions.
diff --git a/packages/app-page-builder/src/editor/plugins/elementSettings/animation/AnimationSettings.tsx b/packages/app-page-builder/src/editor/plugins/elementSettings/animation/AnimationSettings.tsx
@@ -15,7 +15,6 @@ import InputField from "../components/InputField";
 // Icon
 import { ReactComponent as TimerIcon } from "./icons/round-av_timer-24px.svg";
 import { useActiveElement } from "~/editor/hooks/useActiveElement";
-import { isLegacyRenderingEngine } from "~/utils";
 
 const classes = {
     grid: css({
@@ -53,23 +52,22 @@ const Settings: React.FC<SettingsPropsType & PbEditorPageElementSettingsRenderCo
         dataNamespace: DATA_NAMESPACE
     });
 
-    if (isLegacyRenderingEngine) {
-        const animationName = get(element, DATA_NAMESPACE + ".name", "");
-        const animationDuration = get(element, DATA_NAMESPACE + ".duration", 0);
-        // Trigger animation manually on "animation" type change.
-        useEffect(() => {
-            if (animationName) {
-                const animationElement = document.querySelector(`[data-aos=${animationName}]`);
-                if (animationElement) {
-                    animationElement.classList.remove("aos-animate");
-                    setTimeout(
-                        () => animationElement.classList.add("aos-animate"),
-                        animationDuration || 250
-                    );
-                }
+    const animationName = get(element, DATA_NAMESPACE + ".name", "");
+    const animationDuration = get(element, DATA_NAMESPACE + ".duration", 0);
+
+    // Trigger animation manually on "animation" type change.
+    useEffect(() => {
+        if (animationName) {
+            const animationElement = document.getElementById(element.id);
+            if (animationElement) {
+                animationElement.classList.remove("aos-animate");
+                setTimeout(
+                    () => animationElement.classList.add("aos-animate"),
+                    animationDuration || 250
+                );
             }
-        }, [animationName, animationDuration]);
-    }
+        }
+    }, [animationName, animationDuration]);
 
     return (
         <Accordion title={"Animation"} defaultValue={defaultAccordionValue}>