Posts Tagged:animation

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.


CSS Animations vs Web Animations API

There is a native API for animation in JavaScript known as the Web Animations API. We’ll call it WAAPI in this post. MDN has good documentation on it, and Dan Wilson has a great article series. In this article, we’ll compare WAAPI and animations done in CSS. A note on browser support WAAPI has a comprehensive and robust polyfill, making it usable in production today, even while browser support is limited. As ever, you can check Can I Use for browser support data. However, that doesn’t provide very good info on support of all the sub features of WAAPI. Here’s a checker for that: See the Pen WAAPI Browser Support Test by Dan Wilson (@danwilson) on CodePen. To experiment with all features without a polyfill, use Firefox Nightly. The basics of WAAPI If you’ve ever used jQuery’s .animate(), the basic syntax of WAAPI should look pretty familiar.  var element = document.querySelector(‘.animate-me’);…

Read More →

Masking vs. Clipping: When to Use Each

I was recently doing some client work where I used both <clipPath>s and <mask>s in SVG to hide and show content for animation. When I started this project, I thought I knew all of the reasons to use one over the other. But, as tends to happen, working closely with something reveals idiosyncrasies. In this post, we’ll go over some of these details so that you can get productive as soon as possible. What is clipping and masking and why should we care about it? Both clipping and masking obscure areas where elements in an SVG or HTML element can be visually applied. You use a bit of SVG designated as a <clipPath> or <mask> by wrapping the element and applying an id, like so: See the Pen d2a9315e310901a3d43ba3bdf8413c65 by Sarah Drasner (@sdras) on CodePen. Though no demo of these techniques will rival Yoksel’s version, which is comprehensive not just…

Read More →

Creating Yin and Yang Loaders On the Web

I came across a couple such animations a while ago and this gave me the idea of creating my own versions with as little code as possible, no external libraries, using various methods, some of which take advantage of more recent features we can use these days, such as CSS variables. This article is going to guide you through the process of building these demos. Before anything else, this is the animation we’re trying to achieve here: The desired result: a rotating ☯ symbol, with its two lobes increasing and decreasing in size. No matter what method we choose to use to recreate the above animation, we always start from the static yin and yang shape which looks as illustrated below: The static yin and yang symbol (live demo). The structure of this starting shape is described by the following illustration: The structure of the static symbol (live demo). First…

Read More →

Animating Single Div Art

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 (@lynnandtonic) on CodePen. It can be hard to jump in and deconstruct how these are made, due to the fact they are using layers of background gradients, box shadows, text shadows, and more in the midst of just a single div and it’s ::before and ::after pseudo-elements. Before we go any further… check out Lynn Fisher’s article on why and how she started working with single div art. One thing that single div pieces rarely do is animate. If you can transform your div or one of its pseudo elements,…

Read More →

Snap Animation States

There are many ways to make icons for a website. Inline SVG is scalable, easy to modify with CSS, and can even be animated. If you’re interested in learning more about the merits of using inline SVG, I recommend reading Inline SVG vs Icon Fonts. With ever increasing browser support, there’s never been a better time to start working with SVGs. Snap Animation States is a JavaScript plugin built around Snap.svg to help create and extend icon libraries with scaleable, editable SVG icons. Snap Animation States makes it easy to load and animate those SVGs with a simple schema. Getting Started Lets start with a basic SVG hamburger menu. This one was made using Affinity Designer, but there are many other free (Inkscape) and paid for (Adobe Illustrator) options available for making vector images. <svg width=”100%” height=”100%” viewBox=”0 0 65 60″ style=”fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:square;stroke-miterlimit:1.5;” fill=”none” stroke=”#000″ stroke-width=”10″> <g> <path class=”hamburger-top” d=”m 5,10…

Read More →

Solving the Last Item Problem for a Circular Distribution with Partially Overlapping Items

Let’s say we wanted to have something like this: Clockwise circular (cyclic) distribution with partially overlapping items. At first, this doesn’t seem too complicated. We start with 12 numbered items: – 12.times do |i| .item #{i} We give these items dimensions, position them absolutely in the middle of their container, give them a background, a box-shadow (or a border) and tweak the text-related properties a bit so that everything looks nice. $d: 2em; .item { position: absolute; margin: calc(50vh – #{.5*$d}) 0 0 calc(50vw – #{.5*$d}); width: $d; height: $d; box-shadow: inset 0 0 0 4px; background: gainsboro; font: 900 2em/ #{$d} trebuchet ms, tahoma, verdana, sans-serif; text-align: center; } So far, so good: See the Pen by thebabydino (@thebabydino) on CodePen. Now all that’s left is to distribute them on a circle, right? We get a base angle $ba for our distribution, we rotate each item by its index…

Read More →

Websites We Like: May 2017

It’s been far too long since we rounded up some of the most interesting websites out there. But this time we have a diverse round-up of whacky interfaces and beautiful layouts to look at. Let’s dive straight in! Nick Jones’ Portfolio The portfolio of Nick Jones is one of the neatest personal websites I’ve ever seen. As you flip through each page and project that Nick has worked on, the interface rotates and zooms in as you get closer to the end. Not only that but the interface changes color and the tiny animation on the title of each post draws your eye to it. In fact, I think this is the first time I’ve felt comfortable with a designer changing the basic paradigm of mouse scrolling – it somehow feels fluent and natural rather than janky and weird. Hey, they always tell us the cheapest things to animate are…

Read More →

Simplifying CSS Cubes with Custom Properties

I know there are a ton of pure CSS cube tutorials out there. I’ve done a few myself. But for mid-2017, when CSS Custom Properties are supported in all major desktop browsers, they all feel… outdated and very WET. I thought I should do something to fix this problem, so this article was born. It’s going to show you the most efficient path towards building a CSS cube that’s possible today, while also explaining what common, but less than ideal cube coding patterns you should steer clear of. So let’s get started! HTML structure The HTML structure is the following: a .cube element with .cube__face children (6 of them). We’re using Haml so that we write the least amount of code possible: .cube – 6.times do .cube__face We’re not using .front, .back and classes like that. They’re not useful because they bloat the code and make it less logical. Instead,…

Read More →

Making Custom Properties (CSS Variables) More Dynamic

CSS Custom Properties (perhaps more easily understood as 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 JavaScript, Custom Properties bring something to the table for everyone. Most of the power comes from two unique abilities of Custom Properties: The cascade The ability to modify values with JavaScript Even more power is exposed as you combine Custom Properties with other preexisting CSS concepts, like calc() . The Basics You can use Custom Properties to do effectively what variables in preprocessors like Sass provide – set a global or scoped variable value, and then use it later in your code. But…

Read More →

Mobile, Small, Portrait, Slow, Interlace, Monochrome, Coarse, Non-Hover, First

A month ago I explored the importance of relying on Interaction Media Features to identify the user’s ability to hover over elements or to detect the accuracy of their pointing device, meaning a fine pointer like a mouse or a coarse one like a finger. But it goes beyond the input devices or the ability to hover; the screen refresh rate, the color of the screen, or the orientation. Making assumptions about these factors based on the width of the viewport is not reliable and can lead to a broken interface. I’ll take you on a journey through the land of Media Query Level 4 and explore the opportunities that the W3C CSS WG has drafted to help us deal with all the device fruit salad madness. Media queries Media queries, in a nutshell, inform us about the context in which our content is being displayed, allowing us to scope…

Read More →

Focus Styles on Non-Interactive Elements?

Last month, Heather Migliorisi looked at the accessibility of Smooth Scrolling. In order to do smooth scrolling, you: Check if the clicked link is #jump link Stop the browser default behavior of jumping immediately to that element on the page Animate the scrolling to the element the #jump link pointed to Stopping the browser default behavior is the part that is problematic for accessibility. No longer does the #jump link move focus to element the #jump link pointed to. So Heather added a #4: move focus to the element the #jump link pointed to. But moving focus through JavaScript isn’t possible on every element. Sometimes you need to force that element to be focusable, which she did through setting tabindex=”-1″. We since updated our snippet to do this more-accessible handling of focus. Since then, we’ve heard from quite a few folks about a new side effect to the updated snippet:…

Read More →

The Many Tools for Shape Morphing

To no one’s surprise, I’m sure, there are lots of different ways to do the same thing on the web. Shape morphing, being a thing on the web, is no different. There are some native technologies, some libraries that leverage those, and some libraries that do things all on their own. Let’s look at some of the options (with demos) and weigh the advantages and disadvantages. SMIL The original, native technology for shape morphing is SMIL. We have both a guide to SMIL on CSS-Tricks, and an article talking about replacements for it, since it doesn’t work in Microsoft browsers and Blink threatened to yank it at one point. I wouldn’t suggest doing important work in SMIL but it is OG shape morphing. See the Pen Sitepoint Challenge #1 in SVG and SMIL by Noah Blon (@noahblon) on CodePen. Our article How SVG Shape Morphing Works covers SMIL shape morphing…

Read More →

The Power of Custom Directives in Vue

When you’re initially learning a JavaScript framework, it feels a little like being a kid in a candy store. You take in everything available to you, and right off the bat, there are things that will make your life as a developer easier. Inevitably though, we all reach a point working with a framework where we have a use-case that the framework doesn’t cover very well. The beautiful thing about Vue is that it’s incredibly feature-rich. But even if you have an edge case not covered by the framework, it’s got your back there as well, because you can quite easily create a custom directive. What are directives? I’ve written a post here on directives in my guide on Vue.js, but let’s do a refresher. Directives are tiny commands that you can attach to DOM elements. They are prefixed with v- to let the library know you’re using a special…

Read More →

Smooth Scrolling and Accessibility

Smooth scrolling (the animated change of position within the viewport from the originating link to the destination anchor) can be a nice interaction detail added to a site, giving a polished feel to the experience. If you don’t believe me, look at how many people have responded to the Smooth Scrolling snippet here on CSS-Tricks. Smooth scrolling vs abrupt jumps Regardless of how you implement the feature, there are a few accessibility issues that should be addressed: focus management and animation. Focus Management It is important to ensure that all content can be accessed with the keyboard alone because some users 100% rely on the keyboard for navigation. So, when a keyboard user navigates through the content and hits a link that uses smooth scrolling, they should be able to use it to navigate to the target anchor element. In other words, when you follow a link, the keyboard focus…

Read More →

Debugging Tips and Tricks

Writing code is only one small piece of being a developer. In order to be efficient and capable at our jobs, we must also excel at debugging. When I dedicate some time to learning new debugging skills, I often find I can move much quicker, and add more value to the teams I work on. I have a few tips and tricks I rely on pretty heavily and found that I give the same advice again and again during workshops, so here’s a compilation of some of them, as well as some from the community. We’ll start with some core tenants and then drill down to more specific examples. Main Concepts Isolate the Problem Isolation is possibly the strongest core tenant in all of debugging. Our codebases can be sprawling, with different libraries, frameworks, and they can include many contributors, even people who aren’t working on the project anymore. Isolating…

Read More →

Pong with SVG.js

Everybody loves the vintage game Pong, right? We sure do. What’s more fun? Building it yourself! That’s why we decided to create one with SVG.js – to highlight some aspects of our library. It might seem like a complex idea for a small tutorial, but as you’ll see, it’s simpler than it sounds. Let’s dive into it! Here’s the finished product: See the Pen Fully functional Pong game with effects by Wout Fierens (@wout) on CodePen. Getting started SVG.js is available through Github, npm, bower or CDN.js. There are plenty of options for getting your hands on SVG.js, so use whatever you are most comfortable with. Start out by creating a new HTML document and include the library. Create an empty <div> to serve as a wrapper for the SVG document, and give it an id attribute. Something like pong should be suitable for this project: <div id=”pong”></div> Next, initialize…

Read More →

Back to Top