added animatsions for the contact page

src/components/shared/formParts/TextareaField.js

@@ -1,6 +1,6 @@
 import React from "react"
 import styled from "styled-components"
-import { colors, B2White } from "../../../styles/helpers"
+import { B2White } from "../../../styles/helpers"
 const TextareaField = ({
   value,
   handler,

src/components/templates/contact/ContactIntro.js

@@ -1,18 +1,122 @@
-import React from "react"
+import React, { useEffect } from "react"
 import styled from "styled-components"
 import { GatsbyImage, getImage } from "gatsby-plugin-image"
 import { B1White, B2White, H1White, medWrapper } from "../../../styles/helpers"
 
 import mountains from "../../../images/mountains-icon.png"
 import { Link } from "gatsby"
 
+import { gsap } from "gsap"
+import { ScrollTrigger } from "gsap/ScrollTrigger"
+gsap.registerPlugin(ScrollTrigger)
+
 const ContactIntro = ({ data }) => {
   const image = getImage(
     data?.contactIntroLogo?.localFile?.childImageSharp?.gatsbyImageData
   )
   const alt = data?.contactIntroLogo?.altText
+
+  useEffect(() => {
+    const mainLogo = document.querySelector(
+      "#contact-intro .contact-intro__images--logo"
+    )
+    const mountainOne = document.querySelector("#contact-intro .mountain-one")
+    const mountainTwo = document.querySelector("#contact-intro .mountain-two")
+
+    const mainTitle = document.querySelector(
+      "#contact-intro .contact-intro__content--title"
+    )
+    const mainContent = document.querySelector(
+      "#contact-intro .contact-intro__content--paragraph"
+    )
+
+    console.log("mainTitle", mainTitle)
+
+    gsap
+      .timeline({
+        scrollTrigger: {
+          trigger: "#contact-intro",
+          markers: false,
+          start: "-65px",
+          end: "bottom ",
+          scrub: false,
+        },
+      })
+      .add("start")
+      .fromTo(
+        mainLogo,
+        {
+          y: -300,
+          autoAlpha: 0,
+        },
+        {
+          ease: "power2.out",
+          y: 0,
+          autoAlpha: 1,
+          duration: 1.5,
+        }
+      )
+      .fromTo(
+        mountainOne,
+        {
+          x: -300,
+          autoAlpha: 0,
+        },
+        {
+          ease: "power2.out",
+          x: 0,
+          autoAlpha: 1,
+          duration: 1.5,
+        },
+        "start+=0.5"
+      )
+      .fromTo(
+        mountainTwo,
+        {
+          x: 300,
+          autoAlpha: 0,
+        },
+        {
+          ease: "power2.out",
+          x: 0,
+          autoAlpha: 1,
+          duration: 1.5,
+        },
+        "start+=0.5"
+      )
+      .add("second")
+      .fromTo(
+        mainTitle,
+        {
+          y: 100,
+          autoAlpha: 0,
+        },
+        {
+          ease: "power2.out",
+          y: 0,
+          autoAlpha: 1,
+          duration: 1,
+        },
+        "second-=0.5"
+      )
+      .fromTo(
+        mainContent,
+        {
+          y: 100,
+          autoAlpha: 0,
+        },
+        {
+          ease: "power2.out",
+          y: 0,
+          autoAlpha: 1,
+          duration: 1,
+        },
+        "second"
+      )
+  }, [])
+
   return (
-    <StyledSection>
+    <StyledSection id="contact-intro">
       <div className="wrapper">
         <div className="contact-intro__top-title">
           <h1>{data.contactIntroTopTitle}</h1>
@@ -24,13 +128,13 @@ const ContactIntro = ({ data }) => {
             </Link>
           </div>
           <div
-            className="contact-intro__images--mountains"
+            className="contact-intro__images--mountains mountain-one"
             style={{
               backgroundImage: `url(${mountains})`,
             }}
           />
           <div
-            className="contact-intro__images--mountains"
+            className="contact-intro__images--mountains mountain-two"
             style={{
               backgroundImage: `url(${mountains})`,
             }}

src/components/templates/contact/ProductsDisplay.js

@@ -1,11 +1,44 @@
-import React from "react"
+import React, { useEffect } from "react"
 import styled from "styled-components"
 import { GatsbyImage, getImage } from "gatsby-plugin-image"
 import { medWrapper } from "../../../styles/helpers"
 
+import { gsap } from "gsap"
+import { ScrollTrigger } from "gsap/ScrollTrigger"
+gsap.registerPlugin(ScrollTrigger)
+
 const ProductsDisplay = ({ data }) => {
+  useEffect(() => {
+    gsap
+      .timeline({
+        scrollTrigger: {
+          trigger: "#products-section",
+          markers: false,
+          start: "top 45%",
+          toggleActions: "play none none none",
+        },
+      })
+      .add("start")
+      .fromTo(
+        `#products-section .pro-item`,
+        {
+          autoAlpha: 0,
+          y: 100,
+        },
+        {
+          autoAlpha: 1,
+          ease: "power2.out",
+          y: 0,
+          duration: 1.25,
+          stagger: {
+            each: 0.25,
+          },
+        }
+      )
+  }, [])
+
   return (
-    <StyledDiv>
+    <StyledDiv id="products-section">
       <div className="wrapper">
         {data.productsDisplayProducts.map((item, index) => {
           const image = getImage(
@@ -14,7 +47,7 @@ const ProductsDisplay = ({ data }) => {
           const alt = item?.productImage?.altText
 
           return (
-            <Item key={index}>
+            <Item className="pro-item" key={index}>
               <div className="item-image">
                 <GatsbyImage image={image} alt={alt} />
               </div>

src/components/templates/home/Flavours.js

@@ -20,7 +20,7 @@ const Flavours = ({ data }) => {
       .timeline({
         scrollTrigger: {
           trigger: "#flavours-section",
-          markers: true,
+          markers: false,
           start: "top 30%",
           toggleActions: "play none none none",
         },