diff --git a/components/templates/templatefeaturesanimation/TemplateFeaturesAnimationInline.js b/components/templates/templateFeaturesAnimation/TemplateFeaturesAnimationInline.js
similarity index 100%
rename from components/templates/templatefeaturesanimation/TemplateFeaturesAnimationInline.js
rename to components/templates/templateFeaturesAnimation/TemplateFeaturesAnimationInline.js
diff --git a/components/templates/templatefeaturesanimation/TemplateFeaturesAnimation.js b/components/templates/templateFeaturesAnimation/index.js
similarity index 100%
rename from components/templates/templatefeaturesanimation/TemplateFeaturesAnimation.js
rename to components/templates/templateFeaturesAnimation/index.js
diff --git a/components/templates/templatefeaturesanimation/useAnimatedFeatures.js b/components/templates/templateFeaturesAnimation/useAnimatedFeatures.js
similarity index 100%
rename from components/templates/templatefeaturesanimation/useAnimatedFeatures.js
rename to components/templates/templateFeaturesAnimation/useAnimatedFeatures.js
diff --git a/components/templates/templateFeaturesAnimation/useVisible.js b/components/templates/templateFeaturesAnimation/useVisible.js
new file mode 100644
index 0000000000..7ff3ac7b8f
--- /dev/null
+++ b/components/templates/templateFeaturesAnimation/useVisible.js
@@ -0,0 +1,29 @@
+import React, { useState, useEffect } from 'react';
+
+const useVisible = (element, rootMargin = 0.2) => {
+    const [isVisible, setIsVisible] = useState(false);
+
+    useEffect(() => {
+        const observer = new IntersectionObserver(
+            ([entry]) => {
+                setIsVisible(entry.isIntersecting);
+            },
+            { threshold: rootMargin },
+        );
+
+        if (element.current) {
+            observer.observe(element.current);
+        }
+
+        return () => {
+            if (observer && element.current) {
+                observer.unobserve(element.current)
+            }
+        }
+
+    }, []);
+
+    return isVisible;
+};
+
+export default useVisible;
\ No newline at end of file
diff --git a/pages/templates/apollo/index.js b/pages/templates/apollo/index.js
index 13f2a25471..265d682bf7 100644
--- a/pages/templates/apollo/index.js
+++ b/pages/templates/apollo/index.js
@@ -3,7 +3,7 @@ import TemplateYoutube from '@/components/templates/TemplateYoutube';
 import TemplateFeatures from '@/components/templates/TemplateFeatures';
 import TemplateConfiguration from '@/components/templates/TemplateConfiguration';
 import TemplateRelated from '@/components/templates/TemplateRelated';
-import TemplateFeaturesAnimation from '@/components/templates/templatefeaturesanimation/TemplateFeaturesAnimation';
+import TemplateFeaturesAnimation from '@/components/templates/templateFeaturesAnimation';
 import TemplateSeparator from '@/components/templates/TemplateSeparator';
 import TemplateHero from '@/components/templates/templateHero/TemplateHero';
 import ApolloLogo from './ApolloLogo';
diff --git a/pages/templates/atlantis/index.js b/pages/templates/atlantis/index.js
index aa842228d9..8f8e7978d4 100644
--- a/pages/templates/atlantis/index.js
+++ b/pages/templates/atlantis/index.js
@@ -3,7 +3,7 @@ import TemplateYoutube from '@/components/templates/TemplateYoutube';
 import TemplateFeatures from '@/components/templates/TemplateFeatures';
 import TemplateConfiguration from '@/components/templates/TemplateConfiguration';
 import TemplateRelated from '@/components/templates/TemplateRelated';
-import TemplateFeaturesAnimation from '@/components/templates/templatefeaturesanimation/TemplateFeaturesAnimation';
+import TemplateFeaturesAnimation from '@/components/templates/templateFeaturesAnimation';
 import TemplateSeparator from '@/components/templates/TemplateSeparator';
 import TemplateHero from '@/components/templates/templateHero/TemplateHero';
 import AtlantisLogo from './AtlantisLogo';
diff --git a/pages/templates/diamond/index.js b/pages/templates/diamond/index.js
index 8ed5188796..ebec7b63cf 100644
--- a/pages/templates/diamond/index.js
+++ b/pages/templates/diamond/index.js
@@ -3,7 +3,7 @@ import TemplateYoutube from '@/components/templates/TemplateYoutube';
 import TemplateFeatures from '@/components/templates/TemplateFeatures';
 import TemplateConfiguration from '@/components/templates/TemplateConfiguration';
 import TemplateRelated from '@/components/templates/TemplateRelated';
-import TemplateFeaturesAnimation from '@/components/templates/templatefeaturesanimation/TemplateFeaturesAnimation';
+import TemplateFeaturesAnimation from '@/components/templates/templateFeaturesAnimation';
 import TemplateSeparator from '@/components/templates/TemplateSeparator';
 import TemplateHero from '@/components/templates/templateHero/TemplateHero';
 import DiamondLogo from './DiamondLogo';
diff --git a/pages/templates/freya/index.js b/pages/templates/freya/index.js
index 2879b4dccf..36942827e7 100644
--- a/pages/templates/freya/index.js
+++ b/pages/templates/freya/index.js
@@ -3,7 +3,7 @@ import TemplateYoutube from '@/components/templates/TemplateYoutube';
 import TemplateFeatures from '@/components/templates/TemplateFeatures';
 import TemplateConfiguration from '@/components/templates/TemplateConfiguration';
 import TemplateRelated from '@/components/templates/TemplateRelated';
-import TemplateFeaturesAnimation from '@/components/templates/templatefeaturesanimation/TemplateFeaturesAnimation';
+import TemplateFeaturesAnimation from '@/components/templates/templateFeaturesAnimation';
 import TemplateSeparator from '@/components/templates/TemplateSeparator';
 import TemplateHero from '@/components/templates/templateHero/TemplateHero';
 import FreyaLogo from './FreyaLogo';
diff --git a/pages/templates/ultima/index.js b/pages/templates/ultima/index.js
index 3e6f754f95..3616e33c83 100644
--- a/pages/templates/ultima/index.js
+++ b/pages/templates/ultima/index.js
@@ -3,7 +3,7 @@ import TemplateYoutube from '@/components/templates/TemplateYoutube';
 import TemplateFeatures from '@/components/templates/TemplateFeatures';
 import TemplateConfiguration from '@/components/templates/TemplateConfiguration';
 import TemplateRelated from '@/components/templates/TemplateRelated';
-import TemplateFeaturesAnimation from '@/components/templates/templatefeaturesanimation/TemplateFeaturesAnimation';
+import TemplateFeaturesAnimation from '@/components/templates/templateFeaturesAnimation';
 import TemplateSeparator from '@/components/templates/TemplateSeparator';
 import TemplateHero from '@/components/templates/templateHero/TemplateHero';
 import UltimaLogo from './UltimaLogo';
diff --git a/pages/templates/verona/index.js b/pages/templates/verona/index.js
index a80452ae11..85a31ab5c7 100644
--- a/pages/templates/verona/index.js
+++ b/pages/templates/verona/index.js
@@ -3,7 +3,7 @@ import TemplateYoutube from '@/components/templates/TemplateYoutube';
 import TemplateFeatures from '@/components/templates/TemplateFeatures';
 import TemplateConfiguration from '@/components/templates/TemplateConfiguration';
 import TemplateRelated from '@/components/templates/TemplateRelated';
-import TemplateFeaturesAnimation from '@/components/templates/templatefeaturesanimation/TemplateFeaturesAnimation';
+import TemplateFeaturesAnimation from '@/components/templates/templateFeaturesAnimation';
 import TemplateSeparator from '@/components/templates/TemplateSeparator';
 import TemplateHero from '@/components/templates/templateHero/TemplateHero';
 import VeronaLogo from './VeronaLogo';