Personal website of Dan Wilson
CSS added many new Math constants to be used inside Math functions (such as calc() ). The new constants are pi , e , infinity , -infinity , and NaN . As of February 2024, these CSS constants are available in the latest Edge, Chrome, Safari and Firefox browsers. The basics of CSS pi # When used inside a Math function ( calc() , pow() , round() , etc.), pi equates to the mathematical constant value…
CSS added many new Math functions to supplement the old favorites (such as calc() ). They all ultimately represent a numeric value, but the nuance in how they work is not always clear from the start. As of February 2024, these CSS functions are available in the latest Edge, Chrome, Safari and Firefox browsers. The basics of CSS pow() # Powers in math allow us to specify how many times to multiply…
CSS added many new Math functions to supplement the old favorites (such as calc() ). They all ultimately represent a numeric value, but the nuance in how they work is not always clear from the start. As of October 2023, these are available in the latest Safari and Firefox. They are also available in Edge/Chrome behind the Experimental Web Platform feature flag. The basics of the CSS rem() function…
CSS added many new Math functions to supplement the old favorites (such as calc() ). They all ultimately represent a numeric value, but the nuance in how they work is not always clear from the start. As of October 2023, these are available in the latest Safari and Firefox. They are also available in Edge/Chrome behind the Experimental Web Platform feature flag. The basics of CSS round() # In…
Clip paths (and more generally, the shape building functions offered by CSS Shapes ) provide mechanisms to turn our rectangular elements into other basic shapes. With a little extra planning, we can also use clip paths to perform cutouts inside a shape, as seen in this example. The entire Speak and Spell device is made within a single div using (a lot of) box shadows and background gradients...…
CSS Trigonometric functions are supported in the latest versions of Safari, Firefox, Edge, and Chrome. We also discuss animation via @property , which is supported in the latest Safari, Edge, and Chrome (as of this writing). The CSS Shapes specification enabled a lot to make interesting shapes on the web today, via clip-path , shape-outside , and more. With the introduction of CSS Trigonometric…
During this article there will be several examples that require access to your camera. This API is a web standard, and the demos in this article will only have access to video streams if you opt in and allow access. Camera data is only available/visible to you and nothing is saved by this article or its demos. We are fairly used to the apps on our mobile devices and computers to have access to…
The following is supported in the latest Safari, Firefox, Edge, and Chrome. What happens when you have two simultaneous animations in CSS that modify the same property? div { animation : x 2000ms infinite alternate ease-in , y 2000ms infinite alternate ease-out ; } @keyframes x { from { transform : translateX ( 0vw ) } to { transform : translateX ( 90vw ) } } @keyframes y { from { transform :…
As of September 2020, the features discussed are now in the latest versions of Firefox, Safari, Edge, and Chrome. One of the few pieces that was readily available to CSS but not to the Web Animations API was animating pseudo-elements (such as ::before and ::after ). However, this is starting to be supported in the latest rollout of Web Animations API functionality. When you use the Web Animations…
As of 2022, everything discussed in this article is supported across the latest versions of Safari, Firefox, Edge, and Chrome. While the Web Animations API initially brought a similar mechanism as CSS animations to JavaScript, it also added a few additional features like modifying playback rate and jumping to different points in an animation’s timeline. As the final pieces of the Web Animations…
First, a caveat: I am not an expert in color management and monitor display profiles. I also only understand the surface-level differences between the default color space of sRGB on the web and other newer models. This conversation will include discussions of both, and I’ll explain what I know and leave room (and links) for others to chime in with better explanations. Okay… now with that out of…
The transform property and its friends became more powerful through the addition of the new individual transform properties ( translate , rotate , scale ) and the offset properties (as a part of CSS Motion Path ). All effectively provide a transformation for your element, and all have to follow specific rules to know how those transformations apply. These new properties are now available in…
With the release of Firefox 72 on January 7, 2020 , CSS Motion Path is now in Firefox, new Edge (slated for a January 15, 2020 stable release), Chrome, and Opera (and other Blink-based browsers). That means each of these browsers supports a common baseline of offset-path: path() , offset-distance , and offset-rotate . Firefox also released stable support for offset-anchor (currently behind the…
Even though the hsl() color function allows us to specify hue, saturation, and lightness levels individually, there is no straightforward way to animate one value independently of the others. We will explore how color interpolation works on the web, look at our options to animate a hue around a color wheel, and see how Houdini gives us a mechanism to do this. The basics of HSL # The beauty of…
This is the fifth article in a series discussing different optical illusions & mechanical toys and how we can recreate them on the web (and learn from them). Unlike the other articles in this series, the full effects require a physical item — specifically a pair of 3D Glasses with the red and cyan lenses or a Google Cardboard. The classic-looking red-cyan 3D glasses have been around for about a…
The first big change to web animation easings (aka timing functions) is upon us. After some discussions , updates to the specification , and initial implementations as a separate function, Firefox 65 introduces four new options for the steps() function. jump-start jump-end jump-both jump-none See the Pen Visual Reference: Steps() and Other Easings, Translate by Dan Wilson ( @danwilson ) on CodePen…
I had the pleasure to write the 20th article for 24 ways this year with Clip Paths Know No Bounds — thinking outside the box when using the clip-path property. Making an octagon with only four points Creating multiple shapes from a single clip-path polygon Slicing an image Different shapes by fill rule Combining with blend modes and filters Animating as a content reveal View Article on 24ways.org…
This is a repost of the September 2018 Edition of the Animation at Work newsletter where I was Guest Editor. I love exploring the next level of tools we have available to build interactive animations on the web. With Chrome, Firefox, Safari, and Edge giving us early access to their Canary, Nightly, Technology Preview, and Insider Preview versions respectively, we can start exploring features that…
This is the fourth in an article series discussing different optical illusions & mechanical toys and how we can recreate them on the web (and learn from them). The end result of this article can be seen as a standalone, fullscreen demo or with the code and result side by side . Perhaps you’ve seen them when you collected trading cards in the 90s, more recently seen them on Bluray covers , or have…
This is the third in an article series discussing different optical illusions & mechanical toys and how we can recreate them on the web (and learn from them). Due to the nature of the methods discussed here, some animations will be fast, fill large screen space, and/or be shaky. All animations are paused by default. In the 19th Century, many toys were created to take several static images and…
While still only in Chromium-based browsers and actively being drafted for its specification, CSS Motion Path has grown up a bit in its three years since Chrome 46 rolled out the first implementation. I've previously documented the basics of the primary CSS Motion Path use case via the main three properties — offset-path to define a path for an element to follow, offset-distance to position the…
Houdini has been discussed here and there for a few years now, always with the promise that it will open doors we have never had. Want to make a new way to do layout? Houdini. Want to create a new kind of gradient? Houdini. In short, Houdini gives a developer building blocks in JavaScript to allow writing new kinds of CSS. We have reached the point where this is more than just an idea or a spec.…
This is the second in an article series discussing different optical illusions & mechanical toys and how we can recreate them on the web (and improve them). Due to the nature of this method, some animations shown here will be fast and fill large screen space. All animations are paused by default. In various forms over the years, I have seen a technique to create animation in books or other…
I've used RSS for years, but had shied away from it after the disappearance of iGoogle (that's right, I never relied on Google Reader, instead just the dashboard view Google had for a while) as I didn't have a good replacement. Well, really it was just I didn't know what a good replacement was. But people who know me know that I like reading and hyperclicking on the web. Big Social Media is more…
This is the first in an article series discussing different optical illusions & mechanical toys and how we can recreate them on the web (and improve them). Growing up, my family played a lot of board games. Several games such as Outburst, Password, and Clue Jr. included something that amazed me at the time — a red lens and cards with some light blue text that was obscured by a myriad of red lines.…
I have written this post about twenty times over, but it keeps turning into a rant against notifications, social media, digital assistants, and Blue Bell ice cream. So instead of getting into the "why" (for now), I am going to simply document some goals I have for my site and guidelines for how I approach technology in general... in list form, since prose kept becoming a sixty paragraph ramble. My…
On CSS-Tricks: I discuss some of the newly implemented parts of the Web Animations API Level 1 spec that allow us to modify currently running animations. These are the pieces that will really distinguish the API from the CSS animations we know and love... coming soon to a browser near you. View Article on CSS-Tricks →
I figure there are three main ways we can break out the individual transform functions (such as translate and scale ) from the transform property without a library. The ability to set a new rotate without it affecting a previously set scale , for example, has long been desired by web developers. We’ll take a look at the pros and cons of each approach. These pros and cons will be centered around…
This article originally appeared on CSS Tricks on May 31, 2017. When you dig deep with your tools, it is amazing what you can create out of the most basic of HTML. I have been constantly impressed with “Single Div Art” by Lynn Fisher and others where you take a single generic <div> to create a beautiful cactus , Alamo , or panda. See the Pen #dailycssimages 01: Bear Cub by Lynn Fisher (…
A question appeared on a great Web Animations API article on CSS Tricks about whether or not the API would ever support scrubbing through an animation. As is often the case it does support that, but at a lower level (meaning you can't just say animation.showControlsPlease() ). See the Pen Scrub Multiple Animations in WAAPI by Dan Wilson ( @danwilson ) on CodePen . The Power of currentTime #…
This article originally appeared on CSS Tricks on May 10, 2017. CSS Custom Properties (CSS Variables) provide us ways to make code more concise, as well as introduce new ways to work with CSS that were not possible before. They can do what preprocessor variables can… but also a lot more. Whether you have been a fan of the declarative nature of CSS or prefer to handle most of your style logic in…
In "A Trick: Individual CSS Transform Functions" , I discussed how we could use CSS Variables (Custom Properties) to bring us close to independent transform properties. Each day I explore CSS Variables, however, I'm finding they can help us with any property that accepts multiple values at the same time. See the Pen Pause Independent Animations with CSS Variables by Dan Wilson ( @danwilson ) on…
We get a lot of power through the single transform property in CSS - allowing us to rotate, translate, scale, and more all at once. But allowing all of those different transform functions into one property can trip us up. It's common to want to apply different transforms to different states of our elements. Say we have a button that we always want to be translated -150% vertically. When a user…
When I first heard about the Web Animations API a few years ago, the most exciting piece was the promise of support for motion path animations - so that we could move/translate elements along a defined path instead of the linear default. SVG has had this for years in most browsers, but the ability to use this with any DOM element brought new possibilities. A lot changed after the initial…
Firefox 48 is now available, and with it comes the third browser (after Chrome and Opera) to support an initial feature set of the Web Animations API. With it, Brian Birtles goes into detail why this API is a big deal . A few people have recently asked me why I talk so much about the API but still use CSS animations a lot of the time... so with Firefox's official release, here are some thoughts on…
If you've ever tried to support both touch and mouse events on the web you know there is a lot to consider, and you can get tripped up - especially when you accept that it is not an either/or situation. Pointer Events try to unify different input pointing devices so you don't have to think as differently for touch and mouse (or a stylus... or anything new that comes like an airtap), while also…
When I first started learning about the Web Animations API there was one way to handle a "finish" event - the onfinish callback. It lets you assign it a function and that function is called when the animation is finished. There is a newer way to handle this scenario, though... via the finished Promise. This either excites you (if you know what a Promise is), confuses you (if you know what a…
I've been wanting to try this alternate large-screen layout out for a while, but there were quirks (more on those later) I hadn't resolved so I waited. Now that I (potentially) have resolved the issues I'm just going to flip the switch and see how these columns work out! Mobile is always where I first read something, but I know that especially in the tech industry we still read on large monitors…
This is the conclusion to an introductory/tutorial series on the Web Animations API coming to browsers. I've updated the series content in June 2016, as Chrome and Firefox have both rolled out major updates (and some small spec changes). If you have thoughts/questions or see that I’ve misinterpreted the spec, please reach out to me on Twitter, @dancwilson . We've covered a fair amount of ground…
This is Part 5 of an introductory/tutorial series on the Web Animations API coming to browsers. The spec (and Chromium implementation) for Motion Path has changed significantly since this article was written. The following is still valid conceptually, but property names and more have changed. For the latest, please check CSS Motion Path as of October 2016 . Finally. Animating along a path... no…
This is Part 4 of an introductory/tutorial series on the Web Animations API coming to browsers. I've updated the series content in June 2016, as Chrome and Firefox have both rolled out major updates (and some small spec changes). If you have thoughts/questions or see that I’ve misinterpreted the spec, please reach out to me on Twitter, @dancwilson . Let's continue our discussion on multiple…
About a year ago I bought a Tessel and a few NeoPixel combinations to start developing beyond the screen. Since I hadn't done any soldering since my Theremin craze, I had to get familiar with that again, but otherwise it was largely straightforward to jump in. I made a few small things like a "wreath" that changed colors depending on what holiday you were currently approaching. There was also what…
This is Part 3 of an introductory/tutorial series on the Web Animations API coming to browsers. I've updated the series content in June 2016, as Chrome and Firefox have both rolled out major updates (and some small spec changes). If you have thoughts/questions or see that I’ve misinterpreted the spec, please reach out to me on Twitter, @dancwilson . After our discussion on the Animation's controls…
This is Part 2 of an introductory/tutorial series on the Web Animations API coming to browsers. I've updated the series content in June 2016, as Chrome and Firefox have both rolled out major updates (and some small spec changes). If you have thoughts/questions or see that I’ve misinterpreted the spec, please reach out to me on Twitter, @dancwilson . Now that we understand how to create a basic…
This is Part 1 of an introductory/tutorial series on the Web Animations API coming to browsers. I've updated the series content in June 2016, as Chrome and Firefox have both rolled out major updates (and some small spec changes). If you have thoughts/questions or see that I’ve misinterpreted the spec, please reach out to me on Twitter, @dancwilson . We’ve taken our initial look at the Web…
Let’s talk about the Web Animations API This is an introduction to a tutorial series on the Web Animations API coming to browsers. I've updated the series content in June 2016, as Chrome and Firefox have both rolled out major updates (and some small spec changes). If you have thoughts/questions or see that I’ve misinterpreted the spec, please reach out to me on Twitter, @dancwilson . In Summer…
I looked online. I found a few sites that did what I wanted. None of them worked well on mobile. I wanted to know how many days it had been since a given date... so here it is: How Many Days Since? . It's not fancy. It only has one page. But it does what I needed on all my devices... including using pushState to make the URL bookmarkable. Sometimes a need is simply something a first semester web…
Facebook is for seeing photos of strangers' kids and pets that my friends have liked. Twitter is for seeing people talk about the Apple Watch. Flipboard's Daily Edition is for finding depressing news. And a fun gif at the end. Yahoo News Digest is for finding more depressing news. And a fun quote or stat at the end. LinkedIn is for recruiters to still associate me as a Java developer.…
Nothing.
The big news (to me) out of Microsoft's Build conference was that Microsoft is open sourcing WinJS . I think it is the impetus for the other big announcement about "universal apps" running all the way from phones to Xboxes. WinJS was introduced a couple of years ago as a library to develop native Windows 8 apps using typical front-end web tools. I've talked about it here and there on my blog, and…