Instructions

Find easy to follow instructions

GSAP Guide

All GSAP animations used in this template are collected here. On this page, you’ll find guidance on how to locate and edit them. Each code block comes with extra notes to make it easier to understand.

You can find the code in the Embed Code inside this template.

Blur Entrance Animation with SplitText

Here script code for animation blur entrance.



<script>
  // Only page load blur text
  gsap.registerPlugin(SplitText);

  const heroHeadings = document.querySelectorAll(".left-content-in, .right-content-in");

  heroHeadings.forEach((el) => {
    const split = new SplitText(el, { type: "chars" });

    gsap.fromTo(
      split.chars,
      {
        opacity: 0,
        filter: "blur(18px)"
      },
      {
        opacity: 1,
        filter: "blur(0px)",
        duration: 2.55,
        ease: "power2.out",
        stagger: {
          each: 0.04,
          from: "start"
        }
      }
    );
  });
  

  // Scroll entrance text blur sections
  gsap.registerPlugin(ScrollTrigger, SplitText);

  const headingGroups = [
    { section: '.wrapper-about', heading: '.text-anual' },
    { section: '.wrapper-service', heading: '.inner-head-section.service' },
    { section: '.wrapper-work-tracks', heading: '.inner-tittle-works' },
    { section: '.wrapper-testimonial', heading: '.text-anual' },
    { section: '.outer-item-service.v1', heading: '.item-tittle-service.v1' },
    { section: '.outer-item-service.v2', heading: '.item-tittle-service.v2' },
    { section: '.outer-item-service.v3', heading: '.item-tittle-service.v3' },
    { section: '.outer-item-service.v4', heading: '.item-tittle-service.v4' },
  ];

  headingGroups.forEach(({ section, heading }) => {
    const sectionEl = document.querySelector(section);
    if (!sectionEl) return;

    const headings = sectionEl.querySelectorAll(heading);
    if (!headings.length) return;

    headings.forEach((el) => {
      const split = new SplitText(el, { type: 'chars' });

      gsap.fromTo(
        split.chars,
        {
          opacity: 0,
          filter: 'blur(10px)',
        },
        {
          opacity: 1,
          filter: 'blur(0px)',
          ease: 'none',
          stagger: {
            each: 0.03,
            from: 'start',
          },
          scrollTrigger: {
            trigger: sectionEl,
            start: 'top 80%',
            end: 'top 40%',
            scrub: false,
          },
        },
      );
    });
  });
</script>