Animation

All animations based on GSAP. More information can be found here: https://greensock.com/gsap/

JavaScript Format

gsap.to(item, {
  scrollTrigger: {
    trigger: 'Animation Start Class',
    start: "top center+=150",
    markers: false,
  },
  opacity: 1,
  x: 0,
  ease: "power2.out",
  duration: 2,
  stagger: {
    each: 0.4,
  },
});

HTML Format

<div
  class="tf__footer_content fade_right"
  data-trigerId="footer"
  data-stagger=".25"
>
<!-- ANIMATION NAME VALUES: fade_right, fade_left, fade_bottm  -->
<!-- data-trigerId: whan start animaton animaton container ID  -->
  <div class="icon">
    <div class="icon-contianer">
      <img
        src="svg/phone.svg"
        alt="footer"
        class="img-fluid w-100 svg"
      />
    </div>
  </div>
  <div class="text">
    <h3>Lets talk us</h3>
    <a href="callto:1234567890">[phone]</a>
    <a href="callto:1234567890">[phone]</a>
  </div>
</div>

Title Animation

 <!-- Add has-animation class for title scroll animation  -->
 <h5 class="has-animation">MY serivce</h5>
  <h2 class="has-animation">
    Crafting stories through <br>
    design and innovation
  </h2>

Hover Animation

<!-- Add text_hover_animaiton class for hover text animation  -->
<a href="#" class="text_hover_animaiton">Sitemap</a>