Back

About

Welcome, lovebirds.

The first iteration of the Love Button was used in Webflow's 2021 Year in Review site. It uses Matter.js — a 2D physics engine for the web.

How it works

Matter.js is the library we're using, which gives us the ability to mimic physics in the browser. It's what allows the hearts to fall and bounce around as if they have weight.

Using a Javascript library like Matter.js might be complex for beginners, but this example was made to help you customize and experiment quickly. Below, we cover some of the core elements needed to make Matter.js work, and it highlights areas where you can make quick customizations:

  • First, we linked to the latest version of the Matter.js script. In this case, we're using a link hosted via Cloudflare CDN. This is placed at the top of the 'Before </body> tag' custom code section of the Home page.


<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/matter-js/0.10.0/matter.js"></script>

‍

  • Next, we added an Embed component to the page, then put a canvas element with a specific class inside the component. This class name is important because it lets the script know where Matter.js will be rendered.


<canvas class="matter-js-canvas"></canvas>

‍

  • One of the main areas of customization is the sprite textures list. The sprite textures list is located in the main script block within the 'Before </body> tag' custom code section of the Home page.

    We're using four heart shapes of different colors. You can upload your image assets to Webflow, and then copy the URL of each and paste them into this list.


const textures = [
    "https://assets.website-files.com/62055dbc7a55d4069fa8caed/6206958a436d19ba5132c4e6_heart-pink.svg",
    "https://assets.website-files.com/62055dbc7a55d4069fa8caed/6206958fc89e2b48712893a4_heart-pink-light.svg",
    "https://assets.website-files.com/62055dbc7a55d4069fa8caed/6206958f638b03603ca3c7ca_heart-red.svg",
    "https://assets.website-files.com/62055dbc7a55d4069fa8caed/6206959113216be8d53bf774_heart-maroon.svg"
];


Note: For this example, we're using circles as the base shapes and the sprite textures superimpose heart images onto the circles. This approach simplifies some of the complexities that arise when drawing vector shapes with Matter.js.
‍

  • You can also customize when the shapes disappear. They currently stick around for 35000ms (starting from the point they enter into view).


setTimeout(() => {
    World.remove(engine.world, ball);
}, 35000);

‍

  • To get our button to trigger a heart to fall, we used the ID '#love-button' to identify our main button, and added an event listener so every time the button is clicked, a new shape is created by the 'handleClick' function.


const handleClick = () => {
    const ball2 = createBall();
    World.add(engine.world, [ball2]);
};

const button = document.querySelector("#love-button"); 
button.addEventListener("click", handleClick);

‍

For more advanced information on how to use Matter.js, check out their documentation here.

Note: If you notice any issues with the Matter.js library not working properly, the CDN link may have expired or a newer version of the library may be available. Updating the link to the Matter.js library should solve it.