Web Platform Wednesday, Week 10: Animation & Masking

This week’s Web Platform Wednesday has a theme that every CSS geek will find exciting and many have been waiting for: Animations and Masking!

CSS Animations need no introductions for many of you. They are a pretty stable feature that allows designers to create anything ranging from simple transitions or incredibly complex animation effects, bringing websites into the 4th dimension.

CSS Masking is much newer and has less browser support, but it’s not any less exciting: It will allow authors to crop any CSS element in any possible shape, defined through images. Until now we could only do that in SVG, but CSS Masking will bring this to the world of HTML content as well, opening up a wide range of possibilities. Since CSS Masking is new, there is not much documentation material around it. So, if you help with those properties, you will be one of the first few people documenting this. If you like exploring new territory, this is for you!

Don’t worry if you don’t have much time in your hands, you don’t need to write an entire page to help. You can help to complete subsections of a page, such as Basic facts, Explanatory text, Examples or Links and get credit for the sections you helped on. Also, you don’t need to be an expert on these features to help: You can study them and document them at the same time, effectively helping both yourself and others learn more about them.

To view a full list of all properties we will be covering this week, head over to the WPW page, pick one or more properties you find interesting and want to help with and contact the coordinators through the #webplatform IRC Channel or email on the mailing list to ensure you won’t be doing duplicate work. There is always someone willing to help, so feel free to contact us if you have any questions, problems, feedback or just want to say hi!

A huge thank you to everyone who will contribute or has contributed in a previous WPW! WebPlatform.org could not even aspire to be great without this amazing community!

Live examples coming soon

Many of you have asked for live code examples that allow you to tweak the code and observe what happens. We agree that a feature like this would be of huge educational value and are actively working on providing it.

We plan to use a hosted (and probably customized) version of dabblet, an open source project built by yours truly. We decided to use dabblet because it’s a mature project that has been extensively tested in the community by a couple thousand users every day for almost a year, and because of its unique features, such as its CSS value previewers.

Before we integrate dabblet with WPD, we will need to make a few changes to it and add some features, most of which will be pushed to the dabblet.com website as well. The most significant of these changes is adding JavaScript integration, a long overdue feature. Also, we’ll have to fix a few bugs, improve cross-browser support, and strengthen security.

This work will take some time, but we are confident that when it’s out you will agree with us that it was absolutely worth it.