Great! We’ve got a single SVG file that now handles all the animation, and we now place it as a background image on any element we want. We can solve this by jogging our pieces up and off the canvas. Because the origins are slightly different in SVG, I’m noticing that at the bottom, I’ve got some confetti pieces getting cut off at the end of their animation. transform-origin: 45px 5px These origins aren’t the perfect center of the rectangles, but they’re close enough. I solved this by measuring the distances in Figma and hardcoding some transform origins, e.g. In SVG the default origin is 0,0, meaning the very top left of our canvas □♂️ In the DOM, if you rotate something with CSS, it just rotates by default at the center of the element. If you guessed that SVG has different transform origins, you were correct. When these were DOM elements, they just worked. Ok, wild! So if you save this as an SVG and open it in your browser, you’ll now see some animated confetti, but something is wrong about the positioning of our confetti pieces. This is getting a little weird! □ Īnimation: blast 700ms infinite ease-out Codepen can handle the compilation for us, and I can copy and paste. I guess we’ll move that to the bottom.Īlso, the Sass functions aren’t going to work within our SVG, so we’ll have to compile as CSS and paste it into our SVG. Oh! But now the CSS nth-child selectors are all off by one because the CSS is counting the style element as a child. At first, my SVG was structured as such: Andy’s original approach was to color, rotate, and position various confetti elements using CSS’s nth-child selector. Now that I’ve got the SVG element, I can embed CSS into it and the browser will do its thing. ![]() I used Figma to draw this out as a time-saver, but this can all be written by hand. This is just replacing our DOM that we explored in previous Codepens for portability. This is just a matter of distributing some rectangles on a canvas and picking some sizes we like. First, I’d have to author an SVG element to house the confetti pieces. Ok, so SVG as a background image then? Let’s give it a shot. ![]() I bet instead of delivering as DOM elements, we could put all this inside an SVG and deliver as a background image, giving us way greater control over positioning, sizing, and repeating. This approach also uses absolute positioning and flexbox to distribute the confetti pieces throughout, meaning if you wanted to use it on a wide container, it’d stretch instead of tiling. This means our engineers would have to copy and paste a baker’s dozen confetti-piece divs and make sure to manage the z-index and pointer events of the resulting confetti. In our various contexts, we don’t quite have componentization at the scale we want it. This led me to Andy O’Brien’s Pen.īut this approach has some problems. When digging around for solutions to common problems, oftentimes I’ll start at Codepen. Relying on extra dependencies disqualified the approaches we saw across the web. We also don’t want to have to initialize some JS every time we want to show these. We didn’t want to introduce any dependencies here. There are some that are rendering entire WebGL scenes in Three.JS.įor Stack Overflow, we’d need something as portable as possible and running as close to the native HTML & CSS as we can get. Some are rendering things in JavaScript, others as animated gifs. Carta uses confetti to celebrate exercising options. ![]() Apps like Bamboo use it for anniversaries and birthdays. Thankfully, there are lots of examples of confetti in products across the internet. Time to formalize! Prior artĪs many Stack Overflow users know, the best way to get started is to build off a good example. We ought to be consistent in our approach to confetti that’s reusable, portable, and perhaps most importantly, documented. Soon we had other variations like confetti-bold.svg. Just mere months later, we found this same approach taken 12 times throughout our product. The first time we needed to show some confetti, we simply included a statically rendered SVG of confetti in the background, did our best to position it out of the way of the text, and moved on with our lives.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |