This is again a post about the scout project I am supporting. This time it is about the way how the scout groups can counter the CO2, that was or will be emitted during the project timeline. The ask to me was “easy”:

We want to display three things:

1. The foot-print of the project (Co2 you emit during the timeframe that can be directly attached to the project)
2. The hand-print of activities (The groups do small scale projects that save a Carbon Dioxid Equivalent value)
3. And a tree that is animated and shows the progress of the hand-print catching up with the foot-print.

The scout groups should have the possibilities to submit their projects through a simple form on the website and once we approved the project it should automatically calculate towards the hand-print. The foot-print will be pre-calculated by us and updated on the fly.

To make this happen, I decided to use custom post type for the submitted projects. This allowed each scout group to easily submit their activity through a user-friendly form, while giving us the flexibility to moderate and approve projects before they were counted in the statistics.

Custom Post Types and Meta Fields

Each project submission is stored as a custom post type called “Projekte.” To keep track of the CO₂ savings for each activity, I added a custom meta field (let’s call it co2_ausstoss) where the group can enter the amount of CO₂e (in kilograms) their project saved or offset. This field is included in the submission form and is required for approval.

Calculating the Totals

To display the total hand-print (sum of all approved project CO₂ savings), I wrote a small PHP function that queries all approved “Projekte” posts, sums up the co2_ausstoss values, and converts the total from kilograms to tonnes. This value is then made available via a WordPress shortcode, which can be placed anywhere on the site.

The foot-print is managed by us as a simple number in the backend and updated whenever needed. This keeps the process transparent and under control, while the hand-print grows dynamically as more projects are approved.

How I used the shortcode in the DOM (hidden):
Since I needed to use the calculated value in JavaScript, I placed the shortcode inside a hidden <div> with a data attribute. This way, the value is available for scripts but not visible to users.

<div id="co2data" data-co2-sum="[hand_print_co2]" data-co2-max="[foot_print_co2]" style="display:none;"></div>

When the page is rendered, WordPress replaces [hand_print_co2] with the actual value of the hand-print, e.g. 12,34 and the [foot_print_co2] with the foot-print value.

Animating the Tree

One of the most engaging parts of the page is the animated tree. The idea was to visually represent the progress of the hand-print catching up with the foot-print. For this, I used two overlapping divs, both with the same tree image as the background. The bottom layer is greyed out using a CSS grayscale filter, while the top layer remains in full color.

The colored tree “grows” from the bottom up: as the hand-print increases, the height of the colored div increases proportionally, revealing more of the vibrant tree. This is handled with a bit of JavaScript that reads the current hand-print value, calculates the percentage compared to the foot-print, and adjusts the height of the colored div accordingly. I also experimented with a dashed line at the top of the colored area to show the current progress, but found that a simple growing tree was the clearest visual indicator.

Example:
Here’s the HTML structure for the tree:

<div id="tree-container">
    <div id="tree-background"></div>
    <div id="tree-progress"></div>
</div>

And the CSS:

#tree-container {
    position: relative;
    width: 278px;
    height: 300px;
    overflow: hidden;
    margin: 0 auto;
}
#tree-background {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-image: url('tree-url');
    background-position: bottom center;
    background-repeat: no-repeat;
    filter: grayscale(100%);
}
#tree-progress {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 0;
    background-image: url('tree-url');
    background-position: bottom center;
    background-repeat: no-repeat;
    transition: height 1s ease-in-out;
}

And the JavaScript that makes the tree grow:

document.addEventListener("DOMContentLoaded", function () {
    const co2Element = document.getElementById('co2data');
    const co2Value = parseFloat(co2Element.dataset.co2Sum.replace(',', '.')) || 0;
    const maxHeight = 300; // px
    const co2max = parseFloat(co2Element.dataset.co2max.replace(',', '.')) || 0;
    const height = Math.min(Math.ceil((co2Value / co2max) * maxHeight), maxHeight);

    const treeProgress = document.getElementById('tree-progress');
    if (treeProgress) {
        treeProgress.style.height = `${height}px`;
    }
});

The Result

Now, as scout groups submit and complete their projects, the tree on the website visibly grows, showing in real time how collective action is helping to offset the project’s carbon footprint. It’s a fun and motivating way to make progress visible to everyone involved-and a great reminder that every small action counts!

If you’re interested in the technical details or want to implement something similar for your own project, feel free to reach out or check out the code snippets. You can checkout the tree at crover.info.