Some Animations for Landing Page using GSAP.

public/index.html

@@ -20,7 +20,22 @@
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
         integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
         crossorigin="anonymous"></script>
-    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/lenis.css">
+
+    <!-- Lenis -->
+    <script src="https://unpkg.com/[email protected]/dist/lenis.min.js"></script>
+
+    <!-- GSAP -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/gsap.min.js"
+        integrity="sha512-NcZdtrT77bJr4STcmsGAESr06BYGE8woZdSdEgqnpyqac7sugNO+Tr4bGwGF3MsnEkGKhU2KL2xh6Ec+BqsaHA==" 
+        crossorigin="anonymous" 
+        referrerpolicy="no-referrer"></script>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/SplitText.min.js" 
+        integrity="sha512-wOeEC+9qERAzhliwBFPDb6t8TiFFxdxG8vhK/Ygs7TuC44bpg8pg/X2/U/u+0X4fK05wb9id1EIipnF02+CFQw==" 
+        crossorigin="anonymous" 
+        referrerpolicy="no-referrer"></script>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/ScrollTrigger.min.js" integrity="sha512-P2IDYZfqSwjcSjX0BKeNhwRUH8zRPGlgcWl5n6gBLzdi4Y5/0O4zaXrtO4K9TZK6Hn1BenYpKowuCavNandERg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
     <!-- Firebase -->
     <script src="https://www.gstatic.com/firebasejs/ui/9.6.2/firebase-ui-auth.js"></script>
@@ -29,6 +44,7 @@
     <!-- Styles -->
     <link rel="stylesheet" href="styles/styles.css">
     <link rel="icon" type="image/png" href="images/code_society_round.png">
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/lenis.css">
 
     <title>Code Society</title>
 </head>
@@ -38,17 +54,17 @@
         <nav class="navbar">
             <div class="container-fluid">
                 <div class="row">
-                    <div class="col p-2">
+                    <div class="social col p-2">
                         <a href="https://github.com/Code-Society-Lab">
                             <img src="images/github.svg" height="40" width="40">
                         </a>
                     </div>
-                    <div class="col p-2">
+                    <div class="social col p-2">
                         <a href="https://discord.gg/FzgwHD7Am3">
                             <img src="images/discord.svg" height="40" width="40">
                         </a>
                     </div>
-                    <div class="col p-2">
+                    <div class="social col p-2">
                         <a href="https://matrix.to/#/#codesociety:matrix.org">
                             <img src="images/matrix_icon.svg" height="40" width="40">
                         </a>
@@ -68,7 +84,7 @@
                     <p class="description">We are a friendly community of programmers and scientists of all levels
                         and backgrounds from all around the world!
                     </p>
-                    <a class="btn btn-xl btn-primary" href="https://discord.gg/FzgwHD7Am3">Join now</a>
+                    <a class="btn btn-xl btn-primary cta-join" href="https://discord.gg/FzgwHD7Am3">Join now</a>
                 </div>
             </div>
             <div class="floating-arrow">
@@ -175,25 +191,17 @@
         </div>
     </section>
 
-    <script src="https://unpkg.com/[email protected]/dist/lenis.min.js"></script> 
-    <!-- JavaScript for smooth scrolling when arrow clicked -->
-    <script>
-        document.getElementById('scroll-down').addEventListener('click', function (e) {
-            e.preventDefault();
-            setTimeout(function () {
-                document.getElementById('info').scrollIntoView({ behavior: 'smooth' });
-            }, 500);
-        });
-        // Initialize Lenis
-        const lenis = new Lenis({
-          autoRaf: true,
-        });
-
-        // Listen for the scroll event and log the event data
-        lenis.on('scroll', (e) => {
-          console.log(e);
-        });
-    </script>
+    <!-- Custom Javascript -->
+    <script src="./javascript/script.js"></script>
+
+    <!-- <script>
+        // gsap animations
+
+        gsap.from('nav a', {
+            opacity:0,
+            stagger:0.1
+        })
+    </script> -->
 </body>
 
 </html>

public/javascript/script.js

@@ -0,0 +1,76 @@
+// initializing lenis for smooth scrolling
+const lenis = new Lenis({
+    autoRaf: true,
+});
+
+lenis.on('scroll', (e) => {
+    console.log(e);
+});
+
+// javascript for smooth scrolling when arrow clicked
+document.getElementById('scroll-down').addEventListener('click', function (e) {
+    e.preventDefault();
+    setTimeout(function () {
+        lenis.scrollTo('#info');
+    }, 500);
+});
+
+// gsap animations
+window.addEventListener('DOMContentLoaded', function(){
+    const tl = gsap.timeline();
+
+    tl.from('nav .col', {
+        opacity: 0,
+        x: -50,
+        duration: 0.6,
+        stagger: 0.15,
+        ease: "power2.out",
+        clearProps: "all"
+    });
+
+    tl.from('.logo', {
+        scale:0.9,
+        opacity:0
+    })
+
+    const titles = document.querySelectorAll('.title');
+    titles.forEach((title) => {
+        const splitTitle = new SplitText(title, {type: "chars"});
+
+        tl.from(splitTitle.chars, {
+            opacity: 0,
+            y: 50,
+            rotationX: -90,
+            stagger: 0.05,
+            duration: 0.8,
+            ease: "back.out(1.7)",
+            scrollTrigger: {
+                trigger: title,
+                start: "top 80%",
+                toggleActions: "play none none none"
+            }
+        });
+    });
+
+    const description = document.querySelector('.description');
+    const splitDesc = new SplitText(description, {type: "words"});
+
+    tl.from(splitDesc.words, {
+        opacity: 0,
+        y: 20,
+        stagger: 0.03,
+        duration: 0.5,
+        ease: "power2.out",
+        scrollTrigger: {
+            trigger: description,
+            start: "top 85%",
+            toggleActions: "play none none none"
+        }
+    });
+
+    tl.from('.cta-join', {
+        opacity:0,
+        scale:0.95,
+        y:5
+    })
+});