Instructions

Webflow Template User Guide
GSAP Guide
Every GSAP code used on this template is here. How to edit them and find them is explain on this page. In every code block on this page, we added additional explanation to help you understand everything.

You can find the code in (Site settings) Footer Code.
Card Hover Dynamics
GSAP-powered hover interaction applied within the Featured Journal section, dynamically adjusting width and height across highlighted items. Built for desktop experiences, this motion responds naturally to cursor intent, creating a balanced and editorial layout shift without disrupting overall flow.
<script>
  window.addEventListener("load", () => {

    // DESKTOP ONLY
    if (!window.matchMedia("(min-width: 992px)").matches) return;

    const cards = gsap.utils.toArray(".collection-list-featured");

    cards.forEach(card => {
      const style = getComputedStyle(card);
      card.dataset.defaultWidth = style.width;
      card.dataset.defaultHeight = style.height;
    });

    gsap.set(cards, {
      willChange: "width, height"
    });

    cards.forEach((card, index) => {

      card.addEventListener("mouseenter", () => {

          gsap.to(cards, {
            width: i => {
              if (i === index) return "65rem";
              if (Math.abs(i - index) === 1) return "38rem";
              return "30rem";
            },
            height: i => {
              if (i === index) return "32rem";
              if (Math.abs(i - index) === 1) return "27rem";
              return "22rem";
            },
            duration: 1.1,
            ease: "expo.out",
            overwrite: "auto"
          });

      });

      card.addEventListener("mouseleave", () => {

        gsap.to(cards, {
          width: i => cards[i].dataset.defaultWidth,
          height: i => cards[i].dataset.defaultHeight,
          duration: 0.6,
          ease: "power2.out",
          overwrite: "auto"
        });

      });

    });

  });
</script>
Scroll Revealed CTA Shape
A scroll-triggered interaction that gradually transforms the CTA container from a curved silhouette into a clean, grounded surface. Designed for desktop experiences, this motion introduces a calm sense of arrival—revealing the call to action at a deliberate, unhurried pace.
<script>
window.addEventListener("load", () => {
  gsap.registerPlugin(ScrollTrigger);

  // DESKTOP ONLY
  if (!window.matchMedia("(min-width: 992px)").matches) return;

  gsap.fromTo(
    ".bg-overflow-cta",
    {
      borderTopLeftRadius: "100%",
      borderTopRightRadius: "100%"
    },
    {
      borderTopLeftRadius: "0%",
      borderTopRightRadius: "0%",
      ease: "none",
      scrollTrigger: {
        trigger: ".cta",
        start: "top 5%",
        end: "+=70%",
        scrub: 1.2
      }
    }
  );
});
</script>