Instruction

Button uses a smooth hover animation powered by GSAP. Follow the steps below to set it up correctly in your project:
‍
1. Button Structure
Make sure your button follows this structure:

Button (Parent)
├── Text Block
└── Div Block

In Webflow:

• The main button element should have the class button and the attribute data-button="wrap".

• Inside it, include:

  • A text element with the button-text class is used to keep the visible button label above other layers (high z-index).

  • A div with the button-hover class is used to show the overlay background color and should have the attribute data-button="clip" for the animated overlay on hover.

2. Add Custom Code
Paste the following script inside your Page Settings → Before </body> tag, or in the Site Settings → Custom Code → Footer Code section. (We already added the code in the Site Settings . So you just need to create your button structure by following above guide and it will work automatically)

<!-- Button hover -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script>
$("[data-button='wrap']").each(function () {
  const clipEl = $(this).find("[data-button='clip']").attr("aria-hidden", "true");
  const durationSetting = 0.4;
  const easeSetting = "power2.out";

  function getPercentTop(el, e) {
    let elTop = el.offset().top - $(window).scrollTop();
    let mouseTop = e.pageY - $(window).scrollTop() - elTop;
    return (mouseTop / el.innerHeight()) * 100;
  }
  function getPercentLeft(el, e) {
    let elLeft = el.offset().left;
    let mouseLeft = e.pageX - elLeft;
    return (mouseLeft / el.innerWidth()) * 100;
  }
  $(this).on("mouseenter", function (e) {
    let percentTop = getPercentTop($(this), e);
    let percentLeft = getPercentLeft($(this), e);
    gsap.set(clipEl, { display: "flex" });
    gsap.fromTo(clipEl, { clipPath: `circle(0% at ${percentLeft}% ${percentTop}%)` },
    { clipPath: `circle(141.4% at ${percentLeft}% ${percentTop}%)`,
    duration: durationSetting, ease: easeSetting });
  });
  $(this).on("mouseleave", function (e) {
    let percentTop = getPercentTop($(this), e);
    let percentLeft = getPercentLeft($(this), e);
    gsap.to(clipEl, { clipPath: `circle(0% at ${percentLeft}% ${percentTop}%)`,
    overwrite: true, duration: durationSetting, ease: easeSetting });
  });
});
</script>

• You can adjust the animation duration by changing the value of durationSetting.

• The effect creates a circular hover animation that expands and collapses based on your cursor position.

Removing  Button Hover Animations
If you want to remove the GSAP button hover animation from your project, follow these steps:

This animation reveals text smoothly as the user scrolls, powered by GSAP, ScrollTrigger, and SplitType. Follow these steps to add it to your project:

1: Add Text Element
Add the element you want to animate (e.g., Heading, Paragraph, or Text Block) and give it this class name: reveal-type.
You can apply this class to multiple text elements — each will animate individually on scroll.

2. Add Custom Code
Paste the following script inside your Page Settings → Before </body> tag, or in the Site Settings → Custom Code → Footer Code section. (We already added the code in the Site Settings . So you just need to take a text element and give the reveal-type class to it and it will reveal on scroll)

<!-- Text Animation -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script src="https://unpkg.com/split-type"></script>
<script>
gsap.registerPlugin(ScrollTrigger);

const splitTypes = document.querySelectorAll('.reveal-type');
splitTypes.forEach((char,i) => {
  const text = new SplitType(char, {types: ['chars','words']});
  gsap.from(text.chars, {
    scrollTrigger: {
      trigger: char,
      start: 'top 80%',
      end: 'top 20%',
      scrub: true,
      markers: false
    },
    opacity: 0.0,
    stagger: 0.1,
  })
});
</script>

• The text fades in letter by letter while scrolling into view.

• Adjust start and end values in the ScrollTrigger settings to control when the animation begins or ends.

• You can also control the text fade effect by adjusting the opacity and stagger values.

Removing  Text Reveal Animations
If you want to remove the GSAP text reveal animation from your project, follow these steps: