Instructions

A complete guide to editing content, managing assets, and tailoring Marweith to your brand.

Build immersive experiences with confidence.
‍
This guide walks you through every GSAP animation included in Marweith, explaining how each script works and where you can customize it to match your brand and creative direction.

Lenis script code

This script enables smooth scrolling throughout the website, creating a more fluid and refined navigation experience while maintaining compatibility with GSAP animations.

< script >
  const lenis = new Lenis({
    duration: 1.6
  });
lenis.on('scroll', ScrollTrigger.update);
gsap.ticker.add((time) => {
  lenis.raf(time * 1000);
});
gsap.ticker.lagSmoothing(0); <
/script>

Mouse trail script code

This script generates an interactive image trail that follows the cursor movement, adding a dynamic visual effect that enhances user engagement and creativity.

<script>
  window.Webflow ||= [];
  window.Webflow.push(() => {
    if (window.innerWidth < 768) return;

    const trails = document.querySelectorAll('.img-trail-wrapp');
    gsap.set(trails, {
      opacity: 0,
      xPercent: -50,
      yPercent: -50,
      pointerEvents: 'none',
      force3D: true,
    });

    gsap.to(trails, {
      opacity: 1,
      duration: 0.5,
      delay: 2.35,
    });

    trails.forEach((trail) => {
      gsap.set(trail, {
        xPercent: -50,
        yPercent: -50,
        pointerEvents: 'none',
        force3D: true,
      });

      const xTo = gsap.quickTo(trail, 'x', {
        duration: 0.45,
        ease: 'power3.out',
      });

      const yTo = gsap.quickTo(trail, 'y', {
        duration: 0.45,
        ease: 'power3.out',
      });

      const rotateTo = gsap.quickTo(trail, 'rotation', {
        duration: 0.6,
        ease: 'power2.out',
      });

      let lastX = window.innerWidth / 2;

      window.addEventListener('mousemove', (e) => {
        const deltaX = e.clientX - lastX;
        lastX = e.clientX;

        const rotation = gsap.utils.clamp(-15, 15, deltaX * 0.25);

        xTo(e.clientX);
        yTo(e.clientY);
        rotateTo(rotation);
      });
    });
  });
</script>