Instructions

Editing the Donation Modal

To customise or remove the donation modal:

1. Navigate to the Donation Modal Component
   Locate the Donation Modal component in your Webflow project.
2. Reveal the Modal‍
   Remove the combo class .hide from the .donation-modal_component so the modal becomes visible in the Designer.
3. Replace the Placeholder
   Inside the modal, locate the element .donation-embed-placeholder.
   Delete this placeholder and replace it with your actual donation embed, such as a third-party form or payment widget.
4. Hide the Modal Again
   Once editing is complete, reapply the .hide combo class to keep the modal hidden until triggered on the live site.

Not Accepting Donations?‍

If you don’t plan to accept donations:

1. Remove the Donate button from the navigation bar.
2. Delete the Donation Modal Component from every page.

Interaction Guide

This template includes a mix of classic Webflow interactions and custom GSAP-powered animations. Below is a breakdown of what’s included and how to use or customise each one.

Classic Webflow Interactions

These are standard Webflow interactions built using Webflow’s native Interactions panel.

• Navbar Menu Open/Close
  Triggered on the .navbar_component. Handles mobile menu toggle.
• Navbar Dropdown (Desktop & Tablet)
  Triggered on .navbar_menu-dropdown elements. Controls dropdown visibility on hover.
• Navbar Scroll Hide/Reveal
  A page scroll interaction that hides the navbar on scroll down and reveals it on scroll up.

GSAP Interactions

These animations use GSAP and are triggered by custom events or scroll-based attributes.

Custom Event Interactions

• Page Loader Animation
  Triggered by a custom pageLoad event. Requires the following script in the Footer Code (before </body>).
  Do not remove this script or the loader animation will not work.

‍

<!-- Page Load Event-->
<script>
  window.addEventListener('load', () => {
    const wfIx = Webflow.require('ix3');
    wfIx.emit('pageLoad');
  });
</script>

‍

Scroll-Triggered Interactions

To apply these scroll animations, add a custom attribute to the target element:

1. Select the element.
2. Open the Settings panel.
3. Under Custom Attributes, click + Add Custom Attribute.
4. Use data-reveal-animation as the name and one of the following values:

Scroll-Trigger Values

• ‍Fade Left Entrance = fade-left‍
• ‍Fade Up Entrance = fade-up

Hover Interactions

• Card Hover
  Subtle animation on card hover to indicate interactivity.
• Card Image Hover
  Zoom or shift effect on image within a card.

Click Interactions

• Open Donation Modal
  Triggers modal popup with donation options.
• Close Donation Modal
  Closes the donation modal.