Merge pull request #138 from w3bdesign/dev

Finpuss animasjoner

src/components/Index/Hero.component.tsx

@@ -1,28 +1,42 @@
 import { gsap } from "gsap";
 import { useEffect, useRef } from "react";
 
+import { FaReact, FaVuejs, FaPhp } from "react-icons/fa";
+import { SiTypescript, SiWordpress } from "react-icons/si";
+
 type TTimeLineRef = HTMLDivElement | null;
 
 const Hero = (): JSX.Element => {
   const boxRef = useRef<TTimeLineRef>(null);
 
   // wait until DOM has been rendered
   useEffect(() => {
-    gsap.from(boxRef.current, {
-      scale: 0.2,
-      duration: 2,
-      opacity: 0,
-      ease: "Expo.easeOut",
-      delay: 0.2
-    });
-
-    gsap.to(".text-reveal", {
-      clipPath: "polygon(0 0, 100% 0, 100% 100%, 0% 100%)",
-      stagger: 0.8,
-      duration: 0.3,
-      delay: 0.2,
-      y: 0
-    });
+    gsap
+      .timeline()
+      .from(boxRef.current, {
+        scale: 0.6,
+        duration: 1.5,
+        opacity: 0,
+        ease: "Expo.easeOut",
+        delay: 0.2
+      })
+      .to(
+        ".text-reveal",
+        {
+          clipPath: "polygon(0 0, 100% 0, 100% 100%, 0% 100%)",
+          stagger: 0.7,
+          duration: 0.3,
+          y: 0
+        },
+        "-=0.5"
+      )
+      .to(".icon-reveal", {
+        clipPath: "polygon(0 0, 100% 0, 100% 100%, 0% 100%)",
+        stagger: 0.6,
+        duration: 0.2,
+        x: 0,
+        delay: 0.6
+      });
   }, []);
 
   return (
@@ -31,8 +45,7 @@ const Hero = (): JSX.Element => {
       aria-label="Kontainer for animasjoner av introtekst"
       id="main-hero"
       data-testid="main-hero"
-      className="flex flex-col justify-center text-lg"
-    >
+      className="flex flex-col justify-center text-lg">
       <div ref={boxRef} className="p-4 mt-6 mb-6 bg-white opacity-75">
         <div className="text-black rounded">
           <section role="intro" aria-label="Introduksjonstekst">
@@ -44,6 +57,13 @@ const Hero = (): JSX.Element => {
               Jeg kan PHP, mySQL, Wordpress, Javascript, Typescript, React, Vue, Redux, Docker,
               Photoshop og mye mer.
             </h2>
+            <span className="flex justify-center p-6">
+              <FaReact className="icon-reveal mr-6" title="React ikon" size="3em" />
+              <FaVuejs className="icon-reveal mr-6" title="Vue ikon" size="3em" />
+              <SiTypescript className="icon-reveal mr-6" title="Typescript ikon" size="3em" />
+              <SiWordpress className="icon-reveal mr-6" title="Wordpress ikon" size="3em" />
+              <FaPhp className="icon-reveal mr-6" title="PHP ikon" size="3em" />
+            </span>
           </section>
         </div>
       </div>

src/styles/globals.css

@@ -28,3 +28,9 @@ a {
   transform: translateY(-3em);
   clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
 }
+
+.icon-reveal {
+  transition: all 1.5s;
+  transform: translateX(3em);
+  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
+}