Title Six
diff --git a/src/Components/UpcomingProjects.jsx b/src/Components/UpcomingProjects.jsx
index 8753429ca..a6fe8a862 100644
--- a/src/Components/UpcomingProjects.jsx
+++ b/src/Components/UpcomingProjects.jsx
@@ -1,4 +1,5 @@
import React from 'react';
+import PulsePageWrapper from './pulse';
const UpcomingProjects = () => {
// Custom styles for gradient text
@@ -11,12 +12,14 @@ const UpcomingProjects = () => {
};
return (
+
Upcoming Projects
Coming Soon
+
);
}
diff --git a/src/Components/bounce.jsx b/src/Components/bounce.jsx
new file mode 100644
index 000000000..19e36c96b
--- /dev/null
+++ b/src/Components/bounce.jsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { motion } from "framer-motion";
+
+const bounceVariants = {
+ initial: { opacity: 0, y: 100 },
+ animate: { opacity: 1, y: 0, transition: { type: "spring", stiffness: 300, damping: 20 } },
+ exit: { opacity: 0, y: -100 },
+};
+
+const BouncePageWrapper = ({ children }) => {
+ return (
+
+ {children}
+
+ );
+};
+
+export default BouncePageWrapper;
diff --git a/src/Components/fadeSlideup.jsx b/src/Components/fadeSlideup.jsx
new file mode 100644
index 000000000..60efe7211
--- /dev/null
+++ b/src/Components/fadeSlideup.jsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { motion } from "framer-motion";
+
+const slideUpVariants = {
+ initial: { opacity: 0, y: 100 },
+ animate: { opacity: 1, y: 0, transition: { duration: 0.8, ease: "easeOut" } },
+ exit: { opacity: 0, y: -50 },
+};
+
+const SlideUpPageWrapper = ({ children }) => {
+ return (
+
+ {children}
+
+ );
+};
+
+export default SlideUpPageWrapper;
diff --git a/src/Components/pulse.jsx b/src/Components/pulse.jsx
new file mode 100644
index 000000000..1f64108e2
--- /dev/null
+++ b/src/Components/pulse.jsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { motion } from "framer-motion";
+
+const pulseVariants = {
+ initial: { opacity: 0, scale: 0.6 },
+ animate: { opacity: 1, scale: 1.1, transition: { duration: 0.6, yoyo: Infinity, repeatDelay: 0.2 } },
+ exit: { opacity: 0, scale: 0.6 },
+};
+
+const PulsePageWrapper = ({ children }) => {
+ return (
+
+ {children}
+
+ );
+};
+
+export default PulsePageWrapper;
diff --git a/src/Components/slideInleftfade.jsx b/src/Components/slideInleftfade.jsx
new file mode 100644
index 000000000..da434eeb6
--- /dev/null
+++ b/src/Components/slideInleftfade.jsx
@@ -0,0 +1,40 @@
+// SlideInFromLeft.js
+import { motion, useAnimation } from 'framer-motion';
+import { useEffect } from 'react';
+
+const SlideInFromLeft = ({ children, duration = 0.7 }) => {
+ const controls = useAnimation();
+
+ const isInViewport = (el) => {
+ const rect = el.getBoundingClientRect();
+ return rect.top <= window.innerHeight && rect.bottom >= 0;
+ };
+
+ useEffect(() => {
+ const handleScroll = () => {
+ const el = document.getElementById('slide-left');
+ if (isInViewport(el)) {
+ controls.start({ opacity: 1, x: 0, transition: { duration } });
+ }
+ };
+
+ window.addEventListener('scroll', handleScroll);
+ handleScroll(); // Trigger once on load
+
+ return () => {
+ window.removeEventListener('scroll', handleScroll);
+ };
+ }, [controls, duration]);
+
+ return (
+
+ {children}
+
+ );
+};
+
+export default SlideInFromLeft;
diff --git a/src/Components/slidebottom.jsx b/src/Components/slidebottom.jsx
new file mode 100644
index 000000000..394ad34c1
--- /dev/null
+++ b/src/Components/slidebottom.jsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { motion } from "framer-motion";
+
+const slideBottomVariants = {
+ initial: { opacity: 0, y: 200 },
+ animate: { opacity: 1, y: 0, transition: { type: "spring", stiffness: 100, damping: 25 } },
+ exit: { opacity: 0, y: 200 },
+};
+
+const SlideBottomPageWrapper = ({ children }) => {
+ return (
+
+ {children}
+
+ );
+};
+
+export default SlideBottomPageWrapper;
diff --git a/src/Components/slideinRightfade.jsx b/src/Components/slideinRightfade.jsx
new file mode 100644
index 000000000..dd8d01688
--- /dev/null
+++ b/src/Components/slideinRightfade.jsx
@@ -0,0 +1,40 @@
+// SlideInFromRight.js
+import { motion, useAnimation } from 'framer-motion';
+import { useEffect } from 'react';
+
+const SlideInFromRight = ({ children, duration = 0.7 }) => {
+ const controls = useAnimation();
+
+ const isInViewport = (el) => {
+ const rect = el.getBoundingClientRect();
+ return rect.top <= window.innerHeight && rect.bottom >= 0;
+ };
+
+ useEffect(() => {
+ const handleScroll = () => {
+ const el = document.getElementById('slide-right');
+ if (isInViewport(el)) {
+ controls.start({ opacity: 1, x: 0, transition: { duration } });
+ }
+ };
+
+ window.addEventListener('scroll', handleScroll);
+ handleScroll(); // Trigger once on load
+
+ return () => {
+ window.removeEventListener('scroll', handleScroll);
+ };
+ }, [controls, duration]);
+
+ return (
+
+ {children}
+
+ );
+};
+
+export default SlideInFromRight;
diff --git a/src/Components/slideinleftRotate.jsx b/src/Components/slideinleftRotate.jsx
new file mode 100644
index 000000000..7a1909181
--- /dev/null
+++ b/src/Components/slideinleftRotate.jsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { motion } from "framer-motion";
+
+const slideRotateVariants = {
+ initial: { opacity: 0, x: -100, rotate: -10 },
+ animate: { opacity: 1, x: 0, rotate: 0, transition: { type: "spring", stiffness: 400, damping: 25 } },
+ exit: { opacity: 0, x: 100, rotate: 10 },
+};
+
+const SlideRotatePageWrapper = ({ children }) => {
+ return (
+
+ {children}
+
+ );
+};
+
+export default SlideRotatePageWrapper;