halloween.js / Framer

Add Halloween effects to Framer

Framer has a Custom Code section in the site settings. The snippet below adds the classes from a script. Custom code needs a paid Framer site plan.

Steps

1. Open Site Settings and scroll to Custom Code.
2. Paste the snippet into End of <body> tag.
3. Save and publish the site.

The snippet

One paste, no other files. It loads halloween.js 1.0.3 from jsDelivr and turns on webs in two corners, blinking eyes, flying witches, a dropping spider and a rising tombstone.

<script src="https://cdn.jsdelivr.net/npm/halloween.js@1.0.3/dist/halloween.iife.js"></script>
<script>
(function () {
  function apply() {
    document.body.classList.add("halloween", "halloween-screen-left-top", "halloween-screen-right-bottom", "halloween-eyes", "halloween-witches", "halloween-spider-drop", "halloween-tombstones");
  }
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", apply);
  } else {
    apply();
  }
})();
</script>

Make it yours

Pick corners, effects, intensity, color and season dates in the playground and open the Paste-only tab. It produces this same snippet, library line included, with your choices.

Good to know

• The effects only appear in a window around Halloween, 18 October to 2 November by default. Change the dates in the playground to see them on another day.
• Ambient effects stop when a visitor has reduced motion turned on. The screen-corner webs stay.
• The effects sit in a fixed layer and never shift your page layout.
• Custom code does not run in the Framer canvas. Check the published site.
• Nothing showing? Reload without cache, then check that the snippet is on the live site and that no content blocker is stripping it.

Other platforms

• WordPress
• Shopify
• Webflow
• Squarespace
• Wix
• Tilda
• Ghost
• Blogger
• Google Tag Manager

All options on the halloween.js home page, full documentation on GitHub.