The Top 2 Matter.js Webflow cloneables

Featured in the Webflow 2021 Year in Review site (https://webflow.com/year-in-review/2021), this Love button uses the Matter.js library (https://brm.io/matter-js/) — a 2D physics engine for the web — to make hearts fall and bounce around as if they have weight. Customize it by adding your own shapes, tweak the speed, or make it rain puppies instead. The sky’s the limit.

Let's face it, Matter.js is fun! It adds dynamic elements to any site where you can play, throw, and drag items into each other with real like physics. This cloneable features how to utilize Matter.js with SVG bodies. While technically this is easy to accomplish this does require a bit of custom code and HTML embeds, with proper div names to work properly. You can find the custom code for Matter.js and this effect in the Webflow custom code page settings, also take note to the CSS HTML Embed located on the page. This technique uses Matter.js, pathseg.min.js and dcomp.min.js to work properly. This uses element IDs to target the matterContainer and can be further modified to your own specifications. A wonderful example of how to add Matter.js to your Webflow sites in a fairly straight forward manner.