Preisgekrönte Agentur-Website erstellen

//Hero Animation
function runHero() {
    const elements = ['#hh1', '#hh2', '#hh3', '#hh4'];
    const xValues = ['-10vw', '20vw', '10vw', '-20vw'];
  
    elements.forEach((element, index) => {
      gsap.to(element, {
        x: xValues[index],
        scrollTrigger: {
          trigger: '.hero',
          start: index === 3 ? 'center center' : 'top top',
          end: 'bottom top',
          scrub: true,
        },
      });
    });
  }
  
  runHero();

//Service Animation
function runService() {
    const elements = ['#sh1', '#sh2'];
    const xValues = ['-30vw', '20vw'];
  
    elements.forEach((element, index) => {
      gsap.to(element, {
        x: xValues[index],
        scrollTrigger: {
          trigger: '.service',
          start: 'top bottom',
          end: 'bottom top',
          scrub: true,
        },
      });
    });
  }
  
  runService();


  function runCTA() {
    const elements = ['#ch1', '#ch2'];
    const initialXValues = ['30vw', '-20vw'];
  
    elements.forEach((element, index) => {
      gsap.set(element, { x: initialXValues[index] });
      gsap.to(element, {
        x: 0,
        scrollTrigger: {
          trigger: '.cta',
          start: 'top bottom',
          end: 'bottom bottom',
          scrub: true,
        },
      });
    });
  }
  
  runCTA();


//Cursor
const cursorSmall = document.querySelector(".cursor-small");
const cursorBig = document.querySelector(".cursor-big");

function mousemoveHandler(e) {
  const target = e.target;
  const tl = gsap.timeline({
    defaults: {
      x: e.clientX,
      y: e.clientY,
      ease: "power2.out"
    }
  });

  if (target.closest(".cta") || target.closest(".projekt")) {
    tl.to(".cursor-small", { opacity: 0 })
      .to(".cursor-big", { opacity: 1 }, "-=0.5");
  } else {
    let scale = target.classList.contains("cta") ? 4 : 1;

    tl.to(".cursor-small", { opacity: 1, scale: scale })
      .to(".cursor-big", { opacity: 0 }, "-=0.5");
  }
}

function mouseleaveHandler() {
  gsap.to(".cursor-small", { opacity: 0 });
}

document.addEventListener("mousemove", mousemoveHandler);
document.addEventListener("mouseleave", mouseleaveHandler);


//Lenis
document.addEventListener("DOMContentLoaded", function() {
  const lenis = new Lenis({
    duration: 1.2,
    easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
    direction: 'vertical',
    gestureDirection: 'vertical',
    smooth: true,
    mouseMultiplier: 1,
    smoothTouch: false,
    touchMultiplier: 2,
    infinite: false,
  });

  lenis.on('scroll', ({ scroll, limit, velocity, direction, progress }) => {
    console.log({ scroll, limit, velocity, direction, progress });
  });

  function raf(time) {
    lenis.raf(time);
    requestAnimationFrame(raf);
  }

  requestAnimationFrame(raf);
});