[ADD] animation on scroll

Author: carms-ng

package-lock.json

@@ -6,6 +6,7 @@
   "author": "Carms Ng",
   "dependencies": {
     "@react-icons/all-files": "^4.1.0",
+    "aos": "^2.3.4",
     "babel-plugin-styled-components": "^1.12.0",
     "gatsby": "^3.2.1",
     "gatsby-plugin-gatsby-cloud": "^2.2.0",

package.json

@@ -24,7 +24,7 @@ export default function Service() {
         {/* Cards */}
         <div className="flex-grow flex flex-col md:flex-row">
           {/* Card */}
-          <div className="card my-2 md:m-6 lg:m-12 p-4 md:p-8 flex-1">
+          <div className="card my-2 md:m-6 lg:m-12 p-4 md:p-8 flex-1" data-aos="fade-up-right">
             <div className="card-header flex items-center text-xl lg:text-2xl">
               <div className="icon-wrapper">
                 <FaCube />
@@ -55,7 +55,7 @@ export default function Service() {
             </ul>
           </div>
           {/* Card */}
-          <div className="card my-2 md:m-6 lg:m-12 p-4 md:p-8 flex-1">
+          <div className="card my-2 md:m-6 lg:m-12 p-4 md:p-8 flex-1" data-aos="fade-up-left">
             <div className="card-header flex items-center text-xl lg:text-2xl">
               <div className="icon-wrapper">
                 <FaChalkboardTeacher />

src/components/service.js

@@ -23,7 +23,7 @@ export default function Steps() {
         {/* cards */}
         <div className="cards flex flex-col md:flex-row">
           {/* card */}
-          <div className="card flex flex-row sm:flex-col items-center text-left sm:text-center md:flex-1 my-2 p-4 md:p-8">
+          <div className="card flex flex-row sm:flex-col items-center text-left sm:text-center md:flex-1 my-2 p-4 md:p-8" data-aos="fade-up" data-aos-delay="100">
             <div className="icon-wrapper text-xl lg:text-2xl mr-4 sm:m-4">
               <FaSignature />
             </div>
@@ -37,7 +37,7 @@ export default function Steps() {
             </div>
           </div>
           {/* card */}
-          <div className="card flex flex-row sm:flex-col items-center text-left sm:text-center md:flex-1 my-2 p-4 md:p-8">
+          <div className="card flex flex-row sm:flex-col items-center text-left sm:text-center md:flex-1 my-2 p-4 md:p-8" data-aos="fade-up" data-aos-delay="400">
             <div className="icon-wrapper text-xl lg:text-2xl mr-4 sm:m-4">
               <FaRocket />
             </div>
@@ -51,7 +51,7 @@ export default function Steps() {
             </div>
           </div>
           {/* card */}
-          <div className="card flex flex-row sm:flex-col items-center text-left sm:text-center md:flex-1 my-2 p-4 md:p-8">
+          <div className="card flex flex-row sm:flex-col items-center text-left sm:text-center md:flex-1 my-2 p-4 md:p-8" data-aos="fade-up" data-aos-delay="700">
             <div className="icon-wrapper text-xl lg:text-2xl mr-4 sm:m-4">
               <FaCubes />
             </div>

src/components/steps.js

@@ -1,4 +1,4 @@
-import * as React from "react"
+import React, { useEffect } from "react"
 import { useTranslation } from 'gatsby-plugin-react-i18next';
 import { graphql } from 'gatsby';
 import Layout from "../components/layout"
@@ -10,7 +10,15 @@ import Steps from "../components/steps";
 import Join from "../components/join";
 import Contact from "../components/contact";
 
+import AOS from 'aos';
+import 'aos/dist/aos.css';
+
 export default function IndexPage() {
+  useEffect(() => {
+    // initialize Animation on Scroll
+    AOS.init();
+  });
+
   const {t} = useTranslation();
   return (
     <Layout>