I like intricacies of snowflakes. Oh how they gracefully fall swirling and dancing! Let's make it snow today with AnimeJS!
This library, as the name suggests, allows you to animate pretty much anything: from css values and dom properties to variables.
Let's create a simple html file, e.g. index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Anime</title>
</head>
<body>
<script type="module">
import anime from "https://esm.sh/animejs@3.2.2";
const createSnowflake = () => {
const el = document.createElementNS(
"http://www.w3.org/2000/svg",
"svg"
);
el.setAttribute("viewBox", "0 0 65 64");
el.classList.add("snowflake");
el.innerHTML = `<path
d="M63.063 30.1745H57.7427L60.1278 27.8056C60.7613 27.1766 60.7613 26.1567 60.128 25.5278C59.4947 24.8988 58.4679 24.8986 57.8348 25.5276L53.1561 30.1745H45.2926L48.7914 26.4393C49.4013 25.7881 49.3644 24.7691 48.7086 24.1628C48.4398 23.9145 48.1086 23.7758 47.7691 23.7416C47.5633 23.7315 43.1215 23.741 43.1215 23.741L48.3202 18.5772H54.8467C55.7425 18.5772 56.4684 17.8562 56.4684 16.9664C56.4684 16.0767 55.7425 15.3557 54.8467 15.3557H51.5633L55.3881 11.5565C56.0214 10.9272 56.0214 9.90753 55.3881 9.27827C54.7546 8.64943 53.6921 8.64943 53.0586 9.27827L49.1531 13.1221V9.7718C49.1531 8.88202 48.4273 8.16106 47.5315 8.16106C46.6357 8.16106 45.9099 8.88202 45.9099 9.7718V16.3438L40.5397 21.7138L40.45 16.8505C40.4498 16.8427 40.4575 16.8354 40.4573 16.8277C40.4498 16.436 40.3051 16.0457 40.0098 15.7412C39.3886 15.1008 38.328 15.0819 37.6831 15.6995L34.2342 18.9695V11.4055L38.8764 6.83016C39.5097 6.2009 39.5276 5.18119 38.8943 4.55215C38.2608 3.92331 37.2072 3.92331 36.5739 4.55215L34.2342 6.84927V1.61072C34.2342 0.720951 33.5084 -1.52588e-05 32.6126 -1.52588e-05C31.7168 -1.52588e-05 30.991 0.720951 30.991 1.61072V6.84949L28.7142 4.55236C28.0807 3.92353 27.0722 3.92353 26.4387 4.55236C25.8054 5.18162 25.7784 6.20133 26.4117 6.83037L30.991 11.4057V19.0129L27.4934 15.6894C26.8428 15.078 25.8351 15.1057 25.2188 15.7515C24.9864 15.9955 24.8549 16.2927 24.805 16.6009C24.7743 16.7261 24.7611 16.856 24.7615 16.9898L24.7425 21.5491L19.3155 16.192V9.7718C19.3155 8.88202 18.5897 8.16106 17.6939 8.16106C16.7981 8.16106 16.0722 8.88202 16.0722 9.7718V12.9705L12.3909 9.27827C11.7574 8.64943 10.749 8.64943 10.1155 9.27827C9.48219 9.90753 9.49127 10.9272 10.1246 11.5565L13.9585 15.3557H10.5224C9.62663 15.3557 8.90079 16.0767 8.90079 16.9664C8.90079 17.8562 9.62663 18.5772 10.5224 18.5772H17.2018L22.5518 23.8913L17.5665 24.0698C16.6971 24.1011 15.9397 24.8075 15.9313 25.6629C15.9304 25.687 15.8558 25.7112 15.8558 25.7353V25.7376L15.9304 25.7428C15.9401 26.1455 16.1369 26.5452 16.4482 26.8506L19.8733 30.1745H12.3657L7.68717 25.5274C7.05365 24.8986 6.02706 24.8986 5.39376 25.5274C4.76046 26.1567 4.76046 27.1764 5.39376 27.8054L7.77862 30.1743H2.30619C1.41041 30.1743 0.68457 30.8952 0.68457 31.785C0.68457 32.6748 1.41041 33.3957 2.30619 33.3957H7.71592L5.39376 35.7023C4.76046 36.3316 4.76046 37.3513 5.39376 37.9803C5.71052 38.2948 6.12565 38.452 6.54057 38.452C6.95549 38.452 7.37062 38.2948 7.68738 37.9803L12.3027 33.396H19.8761L16.5782 36.9168C15.9682 37.568 16.0052 38.587 16.661 39.1933C16.9732 39.482 17.3695 39.6248 17.765 39.6248C17.7724 39.6248 17.7797 39.6237 17.7873 39.6237C17.792 39.6237 17.7968 39.6244 17.8013 39.6244C17.8052 39.6244 17.8093 39.6244 17.8132 39.6244L22.5711 39.5975L17.1388 44.9933H10.5224C9.62663 44.9933 8.90079 45.7142 8.90079 46.604C8.90079 47.4938 9.62663 48.2147 10.5224 48.2147H13.8956L10.1337 51.9514C9.50035 52.5807 9.50035 53.6004 10.1337 54.2295C10.4504 54.5439 10.8655 54.7011 11.2805 54.7011C11.6954 54.7011 12.0744 54.5439 12.3912 54.2295L16.0722 50.5374V53.7986C16.0722 54.6884 16.7981 55.4094 17.6939 55.4094C18.5897 55.4094 19.3155 54.6884 19.3155 53.7986V47.316L24.8171 41.8871L25.0284 47.1252C25.0604 47.9942 25.7888 48.6943 26.6569 48.6769C26.9518 48.6711 27.2718 48.5771 27.5892 48.3455C27.8191 48.1778 30.9912 44.9497 30.9912 44.9497V52.5491L26.4569 57.0886C25.8234 57.7177 25.8415 58.7376 26.4746 59.3666C26.7914 59.6813 27.2152 59.8385 27.6303 59.8385C28.0452 59.8385 28.4288 59.6813 28.7453 59.3669L30.9912 57.1049V62.3892C30.9912 63.279 31.717 64 32.6128 64C33.5086 64 34.2344 63.279 34.2344 62.3892V56.9535L36.7001 59.3669C37.0169 59.6813 37.45 59.8385 37.8649 59.8385C38.2798 59.8385 38.704 59.6813 39.0206 59.3669C39.6539 58.7376 39.6223 57.7179 38.989 57.0888L34.2344 52.3973V44.7302C34.2344 44.7302 37.2028 47.4998 37.6714 47.9465C38.1399 48.3932 38.5237 48.6445 39.0822 48.6445C39.0854 48.6445 39.0887 48.6445 39.0921 48.6445C39.9877 48.6445 40.7094 47.8705 40.704 46.9809L40.6379 41.8919L45.9101 47.1645V53.7986C45.9101 54.6884 46.6359 55.4094 47.5317 55.4094C48.4275 55.4094 49.1533 54.6884 49.1533 53.7986V50.3858L53.0591 54.2295C53.3758 54.5439 53.8087 54.7011 54.2238 54.7011C54.6387 54.7011 55.0627 54.5439 55.3795 54.2295C56.0128 53.6002 56.0173 52.5805 55.384 51.9514L51.6262 48.2147H54.8467C55.7425 48.2147 56.4684 47.4938 56.4684 46.604C56.4684 45.7142 55.7425 44.9933 54.8467 44.9933H48.3832L42.8173 39.4648L47.8031 39.2863C47.8208 39.2857 47.8381 39.2829 47.8556 39.2818C47.8621 39.2814 47.8686 39.2807 47.8751 39.2801C48.735 39.2116 49.3966 38.4835 49.3652 37.6187C49.3464 37.0981 49.0798 36.6456 48.6831 36.3651L45.6874 33.396H53.2193L57.8344 37.9803C58.1512 38.295 58.5661 38.4522 58.9812 38.4522C59.3961 38.4522 59.8113 38.295 60.1278 37.9805C60.7613 37.3515 60.7613 36.3316 60.128 35.7028L57.8059 33.3962H63.063C63.9587 33.3962 64.6846 32.6752 64.6846 31.7854C64.6846 30.8957 63.9587 30.1745 63.063 30.1745ZM43.8835 26.9494L40.8625 30.1745H36.6448L39.8885 26.9526L43.8835 26.9494ZM37.2705 20.571L37.3475 24.8668L34.2342 27.9411V23.4437L37.2705 20.571ZM27.9847 20.5884L30.991 23.4498V27.7891L27.9801 24.7807L27.9847 20.5884ZM21.4115 27.1557L25.6844 27.0028L28.8774 30.1745H24.4885L21.4115 27.1557ZM21.4945 36.3977L24.3062 33.396H28.8145L25.8219 36.3685L21.4945 36.3977ZM28.1144 43.2964L27.9298 38.7773L30.991 35.7189V40.3586L28.1144 43.2964ZM37.4022 43.2245L34.2342 40.3299V35.5666L37.3568 38.6504L37.4022 43.2245ZM43.9259 36.2016L39.685 36.3533L36.7077 33.396H41.0952L43.9259 36.2016Z"
fill="#9AD3FF"
/>`;
const size = Math.ceil(Math.random() * 32);
el.setAttribute("width", size);
el.setAttribute("height", size);
el.style = `position: fixed; z-index:1; top: -64px; left: ${Math.floor(
Math.random() * window.innerWidth
)}px; opacity: 0.5; pointer-events: none;`;
document.body.appendChild(el);
return el;
};
createSnowflake();
anime({
targets: ".snowflake",
translateY: window.innerHeight * 2,
duration: 10000,
easing: "easeInOutSine",
scale: 4,
loop: true,
opacity: 1,
});
</script>
</body>
</html>
I've imported the library from a CDN, but you can of course add it with a package manager, e.g. npm i animejs, but you'll need a bundler, e.g. Vite to make it work with html.
Open index.html in your browser and enjoy a snowflake:
But one snowflake is not enough! Let's add some more byt adjusting the code:
<script type="module">
import anime from "https://esm.sh/animejs@3.2.2";
const createSnowflake = () => {
const el = document.createElementNS(
"http://www.w3.org/2000/svg",
"svg"
);
el.setAttribute("viewBox", "0 0 65 64");
el.classList.add("snowflake");
el.innerHTML = `<path
d="M63.063 30.1745H57.7427L60.1278 27.8056C60.7613 27.1766 60.7613 26.1567 60.128 25.5278C59.4947 24.8988 58.4679 24.8986 57.8348 25.5276L53.1561 30.1745H45.2926L48.7914 26.4393C49.4013 25.7881 49.3644 24.7691 48.7086 24.1628C48.4398 23.9145 48.1086 23.7758 47.7691 23.7416C47.5633 23.7315 43.1215 23.741 43.1215 23.741L48.3202 18.5772H54.8467C55.7425 18.5772 56.4684 17.8562 56.4684 16.9664C56.4684 16.0767 55.7425 15.3557 54.8467 15.3557H51.5633L55.3881 11.5565C56.0214 10.9272 56.0214 9.90753 55.3881 9.27827C54.7546 8.64943 53.6921 8.64943 53.0586 9.27827L49.1531 13.1221V9.7718C49.1531 8.88202 48.4273 8.16106 47.5315 8.16106C46.6357 8.16106 45.9099 8.88202 45.9099 9.7718V16.3438L40.5397 21.7138L40.45 16.8505C40.4498 16.8427 40.4575 16.8354 40.4573 16.8277C40.4498 16.436 40.3051 16.0457 40.0098 15.7412C39.3886 15.1008 38.328 15.0819 37.6831 15.6995L34.2342 18.9695V11.4055L38.8764 6.83016C39.5097 6.2009 39.5276 5.18119 38.8943 4.55215C38.2608 3.92331 37.2072 3.92331 36.5739 4.55215L34.2342 6.84927V1.61072C34.2342 0.720951 33.5084 -1.52588e-05 32.6126 -1.52588e-05C31.7168 -1.52588e-05 30.991 0.720951 30.991 1.61072V6.84949L28.7142 4.55236C28.0807 3.92353 27.0722 3.92353 26.4387 4.55236C25.8054 5.18162 25.7784 6.20133 26.4117 6.83037L30.991 11.4057V19.0129L27.4934 15.6894C26.8428 15.078 25.8351 15.1057 25.2188 15.7515C24.9864 15.9955 24.8549 16.2927 24.805 16.6009C24.7743 16.7261 24.7611 16.856 24.7615 16.9898L24.7425 21.5491L19.3155 16.192V9.7718C19.3155 8.88202 18.5897 8.16106 17.6939 8.16106C16.7981 8.16106 16.0722 8.88202 16.0722 9.7718V12.9705L12.3909 9.27827C11.7574 8.64943 10.749 8.64943 10.1155 9.27827C9.48219 9.90753 9.49127 10.9272 10.1246 11.5565L13.9585 15.3557H10.5224C9.62663 15.3557 8.90079 16.0767 8.90079 16.9664C8.90079 17.8562 9.62663 18.5772 10.5224 18.5772H17.2018L22.5518 23.8913L17.5665 24.0698C16.6971 24.1011 15.9397 24.8075 15.9313 25.6629C15.9304 25.687 15.8558 25.7112 15.8558 25.7353V25.7376L15.9304 25.7428C15.9401 26.1455 16.1369 26.5452 16.4482 26.8506L19.8733 30.1745H12.3657L7.68717 25.5274C7.05365 24.8986 6.02706 24.8986 5.39376 25.5274C4.76046 26.1567 4.76046 27.1764 5.39376 27.8054L7.77862 30.1743H2.30619C1.41041 30.1743 0.68457 30.8952 0.68457 31.785C0.68457 32.6748 1.41041 33.3957 2.30619 33.3957H7.71592L5.39376 35.7023C4.76046 36.3316 4.76046 37.3513 5.39376 37.9803C5.71052 38.2948 6.12565 38.452 6.54057 38.452C6.95549 38.452 7.37062 38.2948 7.68738 37.9803L12.3027 33.396H19.8761L16.5782 36.9168C15.9682 37.568 16.0052 38.587 16.661 39.1933C16.9732 39.482 17.3695 39.6248 17.765 39.6248C17.7724 39.6248 17.7797 39.6237 17.7873 39.6237C17.792 39.6237 17.7968 39.6244 17.8013 39.6244C17.8052 39.6244 17.8093 39.6244 17.8132 39.6244L22.5711 39.5975L17.1388 44.9933H10.5224C9.62663 44.9933 8.90079 45.7142 8.90079 46.604C8.90079 47.4938 9.62663 48.2147 10.5224 48.2147H13.8956L10.1337 51.9514C9.50035 52.5807 9.50035 53.6004 10.1337 54.2295C10.4504 54.5439 10.8655 54.7011 11.2805 54.7011C11.6954 54.7011 12.0744 54.5439 12.3912 54.2295L16.0722 50.5374V53.7986C16.0722 54.6884 16.7981 55.4094 17.6939 55.4094C18.5897 55.4094 19.3155 54.6884 19.3155 53.7986V47.316L24.8171 41.8871L25.0284 47.1252C25.0604 47.9942 25.7888 48.6943 26.6569 48.6769C26.9518 48.6711 27.2718 48.5771 27.5892 48.3455C27.8191 48.1778 30.9912 44.9497 30.9912 44.9497V52.5491L26.4569 57.0886C25.8234 57.7177 25.8415 58.7376 26.4746 59.3666C26.7914 59.6813 27.2152 59.8385 27.6303 59.8385C28.0452 59.8385 28.4288 59.6813 28.7453 59.3669L30.9912 57.1049V62.3892C30.9912 63.279 31.717 64 32.6128 64C33.5086 64 34.2344 63.279 34.2344 62.3892V56.9535L36.7001 59.3669C37.0169 59.6813 37.45 59.8385 37.8649 59.8385C38.2798 59.8385 38.704 59.6813 39.0206 59.3669C39.6539 58.7376 39.6223 57.7179 38.989 57.0888L34.2344 52.3973V44.7302C34.2344 44.7302 37.2028 47.4998 37.6714 47.9465C38.1399 48.3932 38.5237 48.6445 39.0822 48.6445C39.0854 48.6445 39.0887 48.6445 39.0921 48.6445C39.9877 48.6445 40.7094 47.8705 40.704 46.9809L40.6379 41.8919L45.9101 47.1645V53.7986C45.9101 54.6884 46.6359 55.4094 47.5317 55.4094C48.4275 55.4094 49.1533 54.6884 49.1533 53.7986V50.3858L53.0591 54.2295C53.3758 54.5439 53.8087 54.7011 54.2238 54.7011C54.6387 54.7011 55.0627 54.5439 55.3795 54.2295C56.0128 53.6002 56.0173 52.5805 55.384 51.9514L51.6262 48.2147H54.8467C55.7425 48.2147 56.4684 47.4938 56.4684 46.604C56.4684 45.7142 55.7425 44.9933 54.8467 44.9933H48.3832L42.8173 39.4648L47.8031 39.2863C47.8208 39.2857 47.8381 39.2829 47.8556 39.2818C47.8621 39.2814 47.8686 39.2807 47.8751 39.2801C48.735 39.2116 49.3966 38.4835 49.3652 37.6187C49.3464 37.0981 49.0798 36.6456 48.6831 36.3651L45.6874 33.396H53.2193L57.8344 37.9803C58.1512 38.295 58.5661 38.4522 58.9812 38.4522C59.3961 38.4522 59.8113 38.295 60.1278 37.9805C60.7613 37.3515 60.7613 36.3316 60.128 35.7028L57.8059 33.3962H63.063C63.9587 33.3962 64.6846 32.6752 64.6846 31.7854C64.6846 30.8957 63.9587 30.1745 63.063 30.1745ZM43.8835 26.9494L40.8625 30.1745H36.6448L39.8885 26.9526L43.8835 26.9494ZM37.2705 20.571L37.3475 24.8668L34.2342 27.9411V23.4437L37.2705 20.571ZM27.9847 20.5884L30.991 23.4498V27.7891L27.9801 24.7807L27.9847 20.5884ZM21.4115 27.1557L25.6844 27.0028L28.8774 30.1745H24.4885L21.4115 27.1557ZM21.4945 36.3977L24.3062 33.396H28.8145L25.8219 36.3685L21.4945 36.3977ZM28.1144 43.2964L27.9298 38.7773L30.991 35.7189V40.3586L28.1144 43.2964ZM37.4022 43.2245L34.2342 40.3299V35.5666L37.3568 38.6504L37.4022 43.2245ZM43.9259 36.2016L39.685 36.3533L36.7077 33.396H41.0952L43.9259 36.2016Z"
fill="#9AD3FF"
/>`;
const size = Math.ceil(Math.random() * 32);
el.setAttribute("width", size);
el.setAttribute("height", size);
el.style = `position: fixed; z-index:1; top: -64px; left: ${Math.floor(
Math.random() * window.innerWidth
)}px; opacity: 0.5; pointer-events: none;`;
document.body.appendChild(el);
return el;
};
for (let i = 0; i < 10; i++) {
createSnowflake();
}
anime({
targets: ".snowflake",
translateY: window.innerHeight * 2,
duration: 10000,
easing: "easeInOutSine",
scale: 4,
loop: true,
delay: function (el, i, l) {
return i * 1000;
},
opacity: 1,
});
</script>
Reload the page and enjoy a snowfall:
Almost perfect, but not quite yet? Can't seem to put a finger on what's missing? Maybe some rotation or a more sophisticated path?
I'll leave it to you to perfect, AnimeJS can do it all and the documentation is quite enjoayble to read. Don't hesitate to share your creations!
Liked the content and would love to have more of it all year long?
Top comments (0)