halloween.js

Install guide · 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>

Install once, then leave it. The effects switch on by themselves every year from 18 October to 2 November and stay off the rest of the time. There is nothing to remove afterwards. Installed earlier? You will see nothing until 18 October. That is expected, not a bug.

Check that it works

  1. Open your live site in a private window and reload without cache.

  2. Between 18 October and 2 November you should see webs in the screen corners and eyes blinking within a few seconds. Outside those dates the page looks unchanged.

Good to know

  • Want to test outside the season? Open the playground, set the active season to cover today and copy the snippet it generates.
  • 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 in season? See troubleshooting.