Instructions

Updated September 28, 2025

(How the Animations Work)

Animations in this template use Webflow interactions with GSAP. Elements connect to their animations through custom attributes in the settings panel. To make changes, just update the attribute—no coding required.

(Setting Up the Work Page Counter)

Add an element (like a text block) where you want the total number to show, and give it the attribute:
dynamic-count="number"

For each item in your Work collection list, add the attribute:
dynamic-count="work-item"

Paste the following script into your Before </body> embed:

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const totalNumber = document.querySelector('[dynamic-count="number"]');
    const items = document.querySelectorAll('[dynamic-count="work-item"]');
    if (totalNumber) {
      totalNumber.textContent = items.length;
    }
  });
</script>

(Setting Up News Page Social Share Buttons)

The share buttons in this template already have the right attributes (like share-link="xcom", share-link="linkedin", or share-link="medium"). To make them work, just paste the script below into your project settings under Before </body> tag and publish the site.

If you want to enable more platforms, just uncomment them in the script. Then add a new button or link block in Webflow and give it a custom attribute share-link="platform-name" (for example, share-link="facebook"). You can also include a data-url attribute if you want the button to always share a specific link, otherwise it will share the current page.

<script>
  const shareButtons = document.querySelectorAll("[share-link]");

  shareButtons.forEach(button => {
    button.addEventListener("click", () => {
      const platform = button.getAttribute("share-link");
      const pageUrl = encodeURIComponent(button.getAttribute("data-url") || window.location.href);

      let shareUrl = "";

      switch (platform) {
        case "xcom": // X / Twitter
          shareUrl = `https://twitter.com/intent/tweet?url=${pageUrl}`;
          break;

        case "linkedin":
          shareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${pageUrl}`;
          break;
          
        case "medium":
          shareUrl = `https://medium.com/p/import?url=${pageUrl}`;
          break;

        /* extra platforms you can enable if needed */

        // case "facebook":
        //   shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${pageUrl}`;
        //   break;

        // case "reddit":
        //   shareUrl = `https://www.reddit.com/submit?url=${pageUrl}`;
        //   break;
      }

      if (shareUrl) {
        window.open(shareUrl, "_blank");
      }
    });
  });
</script>