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.
Published
Apr 4, 2024
Categories
No items found.
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++) {
createObject();
}
};
