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>

Draggable for service page

This script for draggable on page service.

<script>
 gsap.registerPlugin(Draggable);

  const mm = gsap.matchMedia();

  // Active on tablet & mobile (< 992px)
  mm.add("(max-width: 991px)", () => {
    const container = document.querySelector(".outer-grid-dragable");
    const grid = document.querySelector(".grid-card-service");

    const offset = 80;
    const minX = -(grid.scrollWidth - container.clientWidth + offset);

    Draggable.create(grid, {
      type: "x",
      inertia: true,
      bounds: {
        minX: minX,
        maxX: 0,
      },
    });
  });
</script>

Script data count for number achievement

Data count use on number

<script>
  //for number count down animate
  
  gsap.registerPlugin(ScrollTrigger);

  document.querySelectorAll('[data-count]').forEach((el) => {
    const finalValue = el.getAttribute('data-count');

    const number = parseInt(finalValue.replace(/\D/g, ''));

    const suffix = finalValue.replace(/[0-9]/g, '');

    let obj = { value: 0 };

    gsap.to(obj, {
      value: number,
      duration: 2,
      ease: 'power2.out',

      onUpdate: () => {
        el.textContent = Math.floor(obj.value) + suffix;
      },

      scrollTrigger: {
        trigger: el,
        start: 'top 85%',
        once: true,
      },
    });
  });
</script>

Script for all animation entrance text

Entrance animation with blur effect


<script>
 /* ================= TEXT ENTRANCE ================= */
    document.querySelectorAll('.text-enterance').forEach((el) => {
      let split = new SplitType(el, {
        types: 'words, lines'
      });
  
      gsap.from(split.words, {
        opacity: 0,
        y: 30,
        filter: "blur(16px)",
        duration: 1,
        stagger: 0.08,
        scrollTrigger: {
          trigger: el,
          start: 'top 85%'
        }
      });
    });

   /* ================= TAG ENTRANCE ================= */
    document.querySelectorAll('.tag-enterance').forEach((el) => {
  
      gsap.from(el, {
        opacity: 0,
        y: 30,
        filter: "blur(16px)",
        duration: 1,
        scrollTrigger: {
          trigger: el,
          start: 'top 85%'
        }
      });
    });
</script>