animation for benefits

package.json

@@ -9,6 +9,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@types/gsap": "^3.0.0",
     "bootstrap": "^5.2.3",
     "bootstrap-icons": "^1.10.5",
     "cors": "^2.8.5",

src/App.css

@@ -15,6 +15,7 @@
 
 .home {
 	background-color: #ffad10;
+	min-height: 100vh;
 }
 .bcg-sorry {
 	background-image: url(/src/images/sorry.png);

src/components/Benefits.css

@@ -8,7 +8,7 @@
 	font-weight: bold;
 	margin: 0px;
 	padding-top: 30px;
-	padding-bottom: 0px;
+	padding-bottom: 20px;
 	margin-bottom: 0px;
 	text-align: center;
 	margin-left: 0;

src/components/Benefits.js

@@ -1,13 +1,56 @@
 import React, { useEffect, useRef } from "react";
 import "./Benefits.css";
 import { gsap } from "gsap";
-
+import { ScrollTrigger } from "gsap/ScrollTrigger";
 
 
 const Benefits = () => {
-	// gsap.registerPlugin(SplitText) 
+		const textRef = useRef(null);
+    const h4Refs = useRef([]);
+
+
+	useEffect(() => {
+		console.log("Inside useEffect");
+        gsap.registerPlugin(ScrollTrigger);
+
+        gsap.from(textRef.current, {
+            opacity: 0,
+            y: 100,
+            duration: 1,
+            scrollTrigger: {
+                trigger: textRef.current,
+                start: "top 80%",
+                end: "bottom 40%",
+                scrub: 1,
+
+
+
+            },
+        });
 
-	const textRef = useRef(null);
+        // Populate h4Refs.current array with references to h4 elements
+        const h4Elements = document.querySelectorAll('.reasons h4');
+		console.log("h4Elements:", h4Elements);
+        h4Elements.forEach((element, index) => {
+            h4Refs.current[index] = element;
+        });
+		console.log("h4Refs.current:", h4Refs.current);
+        // Animation for each h4 element
+        h4Refs.current.forEach((h4Ref, index) => {
+            gsap.from(h4Ref, {
+                opacity: 0,
+                x: -50,
+                duration: 0.5,
+                scrollTrigger: {
+                    trigger: h4Ref,
+                    start: "top 80%",
+                    end: "bottom 20%",
+                    scrub: 1,
+                    delay: index * 0.2, // Delay each h4 animation
+                },
+            });
+        });
+    }, []);
 
 
 	return (
@@ -21,15 +64,15 @@ const Benefits = () => {
 
 				<div className="reasons">
 					<div>
-						<h4>We’ll help you find the perfect match</h4>
+						<h4  >We’ll help you find the perfect match</h4>
 						<p>
 							We love and care for each dog as if they are our own. Throughout
 							their time with us, we get to know them and all their little
 							quirks, and find out exactly what they need from their new home.{" "}
 						</p>
 					</div>
 					<div>
-						<h4>We have rehoming centres across the US</h4>
+						<h4 >We have rehoming centres across the US</h4>
 						<p>
 							You are sure to find one close to you, making it easy to come and
 							meet the dogs. Find your nearest centre and meet the dogs that are
@@ -38,15 +81,15 @@ const Benefits = () => {
 					</div>
 
 					<div>
-						<h4>Your new pet has had a full health check</h4>
+						<h4 >Your new pet has had a full health check</h4>
 						<p>
 							Not only is our rehoming fee significantly cheaper than buying a
 							dog, it also includes full vet checks.
 						</p>
 					</div>
 
 					<div>
-						<h4>From playful puppies to sensible seniors</h4>
+						<h4 >From playful puppies to sensible seniors</h4>
 						<p>
 							As well as having dogs of all shapes and sizes – we also have all
 							ages. So, if you’re set on owning a puppy, buying one isn’t your

src/components/Form.css

@@ -17,9 +17,8 @@ form {
 	/* position: fixed; */
 	background-size: cover;
 	background-position: center;
-	/* min-width: 100%; */
-	height: 600px;
-	/* size: 80%; */
+
+	min-height: 600px;
 	background-blend-mode: multiply;
 	z-index: 0;
 }

src/components/Form.js

@@ -4,6 +4,7 @@ import "./Form.css";
 
 // components
 import Benefits from "./Benefits.js";
+
 import Footer from "./Footer.js";
 
 export default function Form(props) {
@@ -91,6 +92,7 @@ export default function Form(props) {
 				</div>
 				<div>
 					<Benefits></Benefits>
+
 					<Footer></Footer>
 				</div>
 			</form>