Matter.js in Webflow

I've been using Matter.js in a few projects recently. Initially, I dismissed Matter.js as just another JavaScript library with no useful use cases (my top contender for this remains three.js). And, while this hasn't changed much, I believe it works well for brief interesting interactions.

Apr 4, 2024
No items found.
Matter.js in Webflow

And I enjoy playing around with it. I've only scratched the surface of what's possible with it, but even the most basic animations produce a nice effect.

Arguably the best tutorial video comes from one of our most popular Weblfow friends, Web Bae.

I basically followed this first tutorial (and then this one) to create the footer animation you can see on this website (you'd have to scroll down to see it). However, my version is also compatible with various screen sizes. It checks the user's screen size and determines the element size and number of elements that fall down. This ensures that the footer is never too full or empty of elements.

const getScaleFactor = () => {
  const screenWidth = window.innerWidth;

  if (screenWidth <= 480) {
    // Mobile devices
    return 0.35; // scale down to 35%
  } else if (screenWidth <= 1024) {
    // Tablets
    return 0.4; // scale down to 40%
  } else if (screenWidth <= 1440) {
    // Laptops
    return 0.5; // scale down to 50%
  } else {
    return 0.65; // scale down to 65%

const letItRainElements = () => {
  const scaleFactor = getScaleFactor();

  // Base number of puffs adjusted by the screen size
  let baseNumberOfEls = 80 * scaleFactor;

  const numberOfEls = Math.floor(baseNumberOfEls); // Ensures the number of puffs is an integer

  for (let i = 0; i < numberOfEls; i++) {

You can find the entire code here.

Other Articles

No items found.

Contact me

Are you ready to build something cool as?!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.