The Future of Health Problems Challenges and Concerns

CODE – Image reveal animation on scroll w/GSAP in tml

class = container

class = reveal

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/ScrollTrigger.min.js"></script>

<style>
    .reveal {
       overflow: hidden;
    }
</style>

<script>
    gsap.registerPlugin(ScrollTrigger);

let revealContainers = document.querySelectorAll(".reveal");

revealContainers.forEach((container) => {
  let image = container.querySelector("img");
  let tl = gsap.timeline({
    scrollTrigger: {
      trigger: container,
      toggleActions: "restart none none reset"
    }
  });

  tl.set(container, { autoAlpha: 1 });
  tl.from(container, 1.5, {
    xPercent: -100,
    ease: Power2.out
  });
  tl.from(image, 1.5, {
    xPercent: 100,
    scale: 1.3,
    delay: -1.5,
    ease: Power2.out
  });
});

</script>

image-animation-with-gsap

calss= reveal

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/ScrollTrigger.min.js"></script>

<style>
    .reveal {
       overflow: hidden;
    }
</style>

<script>
    gsap.registerPlugin(ScrollTrigger);

    let revealContainers = document.querySelectorAll(".reveal");

    revealContainers.forEach((container) => {
      let image = container.querySelector("img");
      let tl = gsap.timeline({
        scrollTrigger: {
          trigger: container,
          toggleActions: "restart none none reset",
          start: "top 50%",
          end: "bottom 20%"
        }
      });

      tl.set(container, { autoAlpha: 1 });
      tl.from(container, 1.5, {
        opacity: 0,
        ease: Power2.out
      });
      tl.from(image, 1.5, {
        opacity: 0,
        scale: 1.3,
        delay: -1.5,
        ease: Power2.out
      });
    });
</script>

How to add animated gradient text to Elementor in css

class = gradient-text

css code

/* - Animated Gradient Text - */

.gradient-text h1, .gradient-text h2, .gradient-text h3, .gradient-text h4, .gradient-text h5, .gradient-text h6 {
 background: linear-gradient(45deg, #2FEBDC, #EB413B, #FFA300, #E422EB);
 background-size:400%;
 animation: text-gradient 15s ease infinite;
 padding:5px 0;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 background-clip: text;
   text-fill-color: transparent;
}

@keyframes text-gradient {
 0% {
  background-position: 0% 50%;
 }
 50% {
  background-position: 100% 50%;
 }
 100% {
  background-position: 0% 50%;
 }
}

web view

<iframe src="https://rctypingtest.netlify.app" width="10" height="500" frameborder="0" title="RC" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

CODE – Frosted Glass effect Navbar

class = navo

	/* Code for the background of the navbar - frosted glass effect */

  .navo {
   background: rgba( 255, 255, 255, 0.01 );
   box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
   backdrop-filter: blur( 25px );
   -webkit-backdrop-filter: blur( 25px ); 
  }

/* Code for the hover effect of the navbar items */

nav a:hover {
    letter-spacing: 5px;
    font-weight: 800;
}

@media only screen and (max-width: 460px) {
  nav a:hover {
   transition:all 0.5s ease;
 }
}

CUSTOM SCROLL BAR IN ELEMENTOR & WORDPRESS

How to make Custom Scroll Bar in Elementor & WordPress

Custom Scroll Bar CSS

::-webkit-scrollbar{
    width: 0.9vw;
    background: #777;
}
::-webkit-scrollbar-thumb{
    background: -webkit-linear-gradient(transparent,#30ff00);
    background: linear-gradient(transparent,#30ff00);
    border-radius: 20px;
}

with hover code

selector .elementor-heading-title:hover {
  color: #8b52ff;
}