INTRO
I don’t know this for a fact but I think that 99.9% of the time, confetti puts smiles on people's faces, especially if they don’t need to clean up after the party. Lucky for us, confetti doesn’t make a mess inside your web browser.
In this quick tutorial, I will show you how easy it is to add confetti animation to a form submission event on Webflow. You can also use this method to add confetti animation to other events on your website or web app.
Why Webflow?
If you already know Webflow you can skip to the next paragraph and if you don’t, stick around for a minute.
Webflow is a SaaS application that allows designers to build responsive websites without any coding knowledge. It allows designers to accomplish most aspects of web development and website distribution entirely within the application. Other than that one of my favorite features in Webflow is the power the embed custom code to the website, and this is exactly how we are going to create this confetti animation.
Don’t be scared to mess around with code
I’m not a programmer, I have very little experience in writing code from scratch But, I know some HTML, JS and CSS, therefore, I know how powerful it is to be able to take some pieces of code and use them to create things that we can’t do natively in platforms such as Webflow and this is one of the reasons I love the ability to use custom code on Webflow to enhance its capabilities.
Canvas Confetti JS
For this to work, I used an open-source JS library called “Canvas Confetti” created by Kiril Vatev, I don’t know you Kiril but this is a chance to say thank you! In the library’s webpage, you can see the source code and some more examples of how to use the library to generate confetti. It is really easy and works on mobile too 🎉
Let's do it!
1. Give the Form object an element ID, Let's call it “myForm”.
2. Copy this code to the custom code <head> tag in the settings page, This piece of code takes the canvas confetti JS library from a CDN (content delivery network) so you won’t have to store the file on your own server.
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.0.3/dist/confetti.browser.min.js"></script>
3. Add this piece of code to the page setting before </body> tag.
<script>document.getElementById("myForm").onsubmit = function() {myFunction()};
function myFunction() {
//alert("The form was submitted");
var myVar = setTimeout(fireConfetti, 1000);
function fireConfetti(){
var end = Date.now() + (2 * 1000);var interval = setInterval(function() {
if (Date.now() > end) {
return clearInterval(interval);
}
confetti({
startVelocity: 30,
spread: 360,
ticks: 60,
shapes: ['square'],
origin: {
x: Math.random(),
// since they fall down, start a bit higher than random
y: Math.random() - 0.2
}
});
}, 200);}
}/*
var myForm = document.getElementById("myForm");
myForm.addEventListener("success", (e) =>{
confetti()}
);var myVar = setTimeout(myTimer, 1000);
function myTimer() {//var button = document.getElementById("conf");//button.addEventListener('click', (event) => {
//}//});
*/</script>
Let’s take a look at this piece of code and break it down:
The following line identifying the form object with the ID you gave in the first step and says when the user submits the form (.submit) do the following function.
document.getElementById(“myForm”).onsubmit =In the following line, I created a variable that set a timeout before executing the confetti exposition because I want to wait for a second to the form to change his stat to success before firing the confetti. The time is in milliseconds, so 1000 milliseconds is 1 second.
var myVar = setTimeout(fireConfetti, 1000);This is the main function that fires the confetti, I took it as it is from the confetti’s project’s webpage. you can change the settings of the timing and the amount of confetti that is firing, just play around with it and have some fun, or take one of the other examples in the project’s page.
function fireConfetti(){
var end = Date.now() + (2 * 1000);confetti({
startVelocity: 30,
spread: 360,
ticks: 60,
shapes: [‘square’],
origin: {
x: Math.random(),
// since they fall down, start a bit higher than random
y: Math.random() — 0.2
}
});
}, 200);}
}
All the heavy work of coding stays in the main confetti.browser.min.js that we implemented in the 2nd stage, so to trigger the animation we only need to use just these few lines of code.
Feel free to check out the live website hosted on Webflow here.
Thanks for reading this article\tutorial. I would love to hear your feedback and to know if this was useful for you. Fell free to reach out, ask me questions, and suggest other topics you want me to cover.