update

product.html

@@ -294,6 +294,41 @@ a{
         margin: 0;
     }
 }
+/* INITIAL STATES */
+.animate-on-scroll {
+    opacity: 0;
+    transform: translateY(50px);
+    transition: all 1s ease-out;
+}
+
+.animate-left {
+    transform: translateX(-50px);
+}
+
+.animate-right {
+    transform: translateX(50px);
+}
+
+.animate-up {
+    transform: translateY(50px);
+}
+
+/* ACTIVE STATE */
+.animate-on-scroll.animate {
+    opacity: 1;
+    transform: translateX(0) translateY(0);
+}
+.content-left.animate-on-scroll.animate {
+    transition-delay: 0.2s;
+}
+
+.content-right.animate-on-scroll.animate {
+    transition-delay: 0.4s;
+}
+
+/* .footer.animate-on-scroll.animate {
+    transition-delay: 0.6s;
+} */
 
 
 </style>
@@ -302,7 +337,7 @@ a{
 <div class="newsletter">
 
     <!-- HEADER -->
-    <div class="header">
+    <div class="header animate-on-scroll animate-left">
         <div class="col-lg-6 header-left">
             <h1>PRODUCT<br>NEWSLETTER</h1>
             <p class="website"><a href="bibhutisolutions.com">www.bibhutisolutions.com</a></p>
@@ -314,7 +349,7 @@ a{
     </div>
 
     <!-- HERO IMAGE -->
-    <div class="hero">
+    <div class="hero animate-on-scroll animate-right">
         <img src="./image.png" alt="Building">
     </div>
 
@@ -322,7 +357,7 @@ a{
     <div class="content-grid">
 
         <!-- LEFT CONTENT -->
-        <div class="content-left">
+        <div class="content-left animate-on-scroll animate-left">
             <h2>Our Product Growth & Innovation in Q1 2023</h2>
 
             <p>
@@ -338,7 +373,7 @@ a{
         </div>
 
         <!-- RIGHT CONTENT -->
-        <div class="content-right">
+        <div class="content-right animate-on-scroll animate-right">
 
             <!-- TOP NEWS CARD -->
             <div class="top-news">
@@ -368,7 +403,7 @@ a{
 
     <!-- FOOTER -->
     <!-- FOOTER -->
-  <footer class="footer animate-on-scroll">
+  <footer class="footer animate-on-scroll animate-up">
     <p>
         <strong>Team Bibhuti Solutions</strong>
     </p>
@@ -401,5 +436,23 @@ a{
 </div>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
 
+<!-- SCROLL ANIMATION SCRIPT -->
+<script>
+document.addEventListener("DOMContentLoaded", function() {
+    const elements = document.querySelectorAll('.animate-on-scroll, .animate-left, .animate-right, .animate-up');
+
+    const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+            if(entry.isIntersecting) {
+                entry.target.classList.add('animate');
+                observer.unobserve(entry.target); // animate once
+            }
+        });
+    }, { threshold: 0.2 });
+
+    elements.forEach(el => observer.observe(el));
+});
+</script>
+
 </body>
 </html>