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.


1 HTML Element + 5 CSS Properties = Magic!

Let’s say I told you we can get the results below with just one HTML element and five CSS properties for each. No SVG, no images (save for the background on the root that’s there just to make clear that our one HTML element has some transparent parts), no JavaScript. What would you think that involves? The desired results. Well, this article is going to explain just how to do this and then also show how to make things fun by adding in some animation. CSS-ing the Gradient Rays The HTML is just one <div>. <div class=’rays’></div> In the CSS, we need to set the dimensions of this element and we need to give it a background so that we can see it. We also make it circular using border-radius: .rays { width: 80vmin; height: 80vmin; border-radius: 50%; background: linear-gradient(#b53, #f90); } And… we’ve already used up four out of…

Read More →

The State of Web Animation: Part 2

In Part 2, we’re picking up where I left off with current tools for animation with JavaScript (mostly in the form of JavaScript libraries). Be sure to check out Part One. Javascript is admittedly a more controversial method of animation than the methods I mentioned previously (Video, Gifs, CSS Transitions + Keyframes). There was once a day when we longed for CSS support of animation and, when that day came to pass, many disregarded JavaScript animation as non-performant and outdated. But now, JavaScript animation is making a come-back in a few different forms (and no, none of them are just changing CSS classes). There are far too many libraries out there to cover them all, so I’ll try to cover more broad techniques with some notable libraries: jQuery Using jQuery as an animation tool (with .animate()) is pretty outdated. Unless you really need your animations to work in IE versions 9 or…

Read More →

The State of Web Animation: Part 1

We’re now well into 2018 and I’m thinking it’s time for a check-in. A lot has happened in the world of the web in the last few years, so let’s review a bit: Responsive Design is now the norm. Clients know what User Experience Design is now and not only respect it but expect it on their projects. Concerns for Web Accessibility are growing. Internet Explorer is all but dead and browsers are in a state of constant improvement without being locked into one version or the other. Overall, I’d say things have really taken an amazing turn for the better (for developers anyway). Now that we’ve begun to cover the basics of the availability and understandability of our content and tools, what’s next? I like to think the next era can focus not on technology, but on how we can make the web feel more like our natural world. And don’t worry, I’m…

Read More →

Simple Swipe With Vanilla JavaScript

I used to think implementing swipe gestures had to be very difficult, but I have recently found myself in a situation where I had to do it and discovered the reality is nowhere near as gloomy as I had imagined. This article is going to take you, step by step, through the implementation with the least amount of code I could come up with. So, let’s jump right into it! The HTML Structure We start off with a .container that has a bunch of images inside: <div class=’container’> <img src=’img1.jpg’ alt=’image description’/> … </div> Basic Styles We use display: flex to make sure images go alongside each other with no spaces in between. align-items: center middle aligns them vertically. We make both the images and the container take the width of the container’s parent (the body in our case). .container { display: flex; align-items: center; width: 100%; img { min-width:…

Read More →

Leverage Interactivity to Build Better Visualizations

Data visualization is a powerful tool for exploring and explaining data. Visualizations typically leverage scale, position, shape, and color to convey meaning and understanding. While these facets represent the core of a visualization, the web offers an opportunity to incorporate interactivity, transitions, and movement. When used effectively, these additional dimensions help users better understand a dataset by showcasing individual elements or key groups, demonstrating change over time, or communicating changes in scale. The examples and best practices shared below represent a sample of the myriad ways interactivity and animation can add value and clarity to data visualizations. Showcase Elements and Sets Perhaps the most immediate application of interactivity within data visualizations is the ability for users to drill deeper into datasets with a hover or click. This pattern is common across most interactive dashboards and charts and is built-in to tools such as Google Charts and Tableau. This type of…

Read More →

Methods, Computed, and Watchers in Vue.js

One of the reasons I love working with Vue is because of how useful methods, computed, and watchers are, and the legibility of their distinction. Until understanding all three, it’s difficult to leverage the functionality of Vue to its full potential. Still, the majority of people I see confused about this framework tend to also be confused about the differences here, so let’s dig in. In case you need a quick answer and don’t have time to read through the entire article, here’s a small TL;DR: Methods: These are exactly what they sound like they might be (yay, naming!). They’re functions that hang off of an object—typically the Vue instance itself or a Vue component. Computed: These properties may at first look like they’d be used like a method, but are not. In Vue, we use data to track changes to a particular property that we’d like to be reactive.…

Read More →

Methods, Computed, and Watchers in Vue.js

One of the reasons I love working with Vue is because of how useful methods, computed, and watchers are, and the legibility of their distinction. Until understanding all three, it’s difficult to leverage the functionality of Vue to its full potential. Still, the majority of people I see confused about this framework tend to also be confused about the differences here, so let’s dig in. In case you need a quick answer and don’t have time to read through the entire article, here’s a small TL;DR: Methods: These are exactly what they sound like they might be (yay, naming!). They’re functions that hang off of an object—typically the Vue instance itself or a Vue component. Computed: These properties may at first look like they’d be used like a method, but are not. In Vue, we use data to track changes to a particular property that we’d like to be reactive.…

Read More →

Animated SVG Radial Progress Bars

Dave Rupert shows us all how to animate radial progress bars in SVG with a tiny script alongside the stroke-dasharray and stroke-dashoffset properties: For a client project we tasked ourselves with building out one of those cool radial progress bars. In the past, we’ve used entire Canvas-based charting libraries (156k/44k gzip), but that seemed like overkill. I looked at Airbnb’s Lottie project where you export After Effects animations as JSON. This is cool for complex animations, but the dependencies seemed heavy (248k/56k gzip) for one micro-animation. Per the usual, I tried my hand at a minimal custom SVG with CSS animation and a small bit of JavaScript (~223b gzip). I’m pleased with the results. Here’s another example Jeremias Menichelli posted here on CSS-Tricks with the added twist of making them components in React and Vue. Direct Link to Article — PermalinkThe post Animated SVG Radial Progress Bars appeared first on…

Read More →

Iron Man’s Arc Reactor Using CSS3 Transforms and Animations

Alright Iron Man fans, fire up your code editors! We are going to make the Arc reactor from Iron Man’s suit in CSS. Here’s what the end result will look like: See the Pen Iron Man’s Arc Reactor by Kunal Sarkar (@supersarkar) on CodePen. The Full Page Wrapper We will make our Arc reactor on a dark full-page background. Here’s our code to make a full page wrapper element: body { margin: 0; } .fullpage-wrapper { height: 100vh; background: radial-gradient(#353c44, #222931); } Why do we declare no margin on the body? The <body> element has some margin set to it by default in the user agent stylesheet. This prevents the elements inside the <body> to touch the edges of the screen. Since we want our wrapper to cover the entire screen, edge to edge, we removed that default margin on <body> element by setting it to 0. We’ve given our…

Read More →

Focusing on Focus Styles

Not everyone uses a mouse to browse the internet. If you’re reading this post on a smartphone, this is obvious! What’s also worth pointing out is that there are other forms of input that people use to get things done. With these forms of input comes the need for focus styles. People People are complicated. We don’t necessarily perform the same behaviors consistently, nor do we always make decisions that make sense from an outsider’s perspective. Sometimes we even do something just to… do something. We get bored easily: tinkering, poking, and prodding things to customize them to better suit our needs, regardless of their original intent. People are also mortal. We can get sick and injured. Sometimes both at once. Sometimes it’s for a little while, sometimes it’s permanent. Regardless, it means that sometimes we’re unable to do things we want or need to do in the way we’re…

Read More →

A CSS Approach to Trap Focus Inside of an Element

I recently read this article by Keith Grant which introduced the newly arrived <dialog>. Excited by this new UI element, I immediately sat down to experiment with it to see how it can be used effectively as a modal — the most common use of it. While experimenting, I discovered a neat CSS trick on how to trap focus within the <dialog> element, a common accessibility requirement for modals, and a notoriously difficult one. What is focus trapping? First, a quote from the W3C documentation regarding what should happen following a key press inside a dialog: Tab: Moves focus to the next tab-able element inside the dialog. If focus is on the last tab-able element inside the dialog, moves focus to the first tab-able element inside the dialog. Shift + Tab Moves focus to the previous tab-able element inside the dialog. If focus is on the first tab-able element inside the dialog,…

Read More →

Animate a Container on Mouse Over Using Perspective and Transform

I’ve been working on a website in which large pictures are displayed to the user. Instead of creating a typical lightbox effect (a zoom-in animation with a black overlay) for these large pictures, I decided to try and make something more interactive and fun. I ended up coding an image container that tilts as the user moves the mouse cursor above it. Here’s the final version: See the Pen MrLopq by Mihai (@MihaiIonescu) on CodePen. This effect is achieved through CSS and JavaScript. I figured I’d make a little tutorial explaining how each part works so you could easily reproduce it or extend it. I recommend reading up on the almanac entries for perspective and transform before we get started. We’re going to refer to these properties through the post and it’s a good idea to be familiar with them. Let’s get down to it. Setup First, we need a…

Read More →

What Houdini Means for Animating Transforms

I’ve been playing with CSS transforms for over five years and one thing that has always bugged me was that I couldn’t animate the components of a transform chain individually. This article is going to explain the problem, the old workaround, the new magic Houdini solution and, finally, will offer you a feast of eye candy through better looking examples than those used to illustrate concepts. The Problem In order to better understand the issue at hand, let’s consider the example of a box we move horizontally across the screen. This means one div as far as the HTML goes: <div class=”box”></div> The CSS is also pretty straightforward. We give this box dimensions, a background and position it in the middle horizontally with a margin. $d: 4em; .box { margin: .25*$d auto; width: $d; height: $d; background: #f90; } See the Pen by thebabydino (@thebabydino) on CodePen. Next, with the…

Read More →

CSS Techniques and Effects for Knockout Text

Knockout text is a technique where words are clipped out of an element and reveal the background. In other words, you only see the background because the letters are knocking out holes. It’s appealing because it opens up typographic styles that we don’t get out of traditional CSS properties, like color. While we’ve seen a number of ways to accomplish knockout text in the past, there are some modern CSS properties we can use now and even enhance the effect further, like transitions and animations. Let’s see them in action. Mix Blend Modes There are four blend modes that effortlessly make text cutouts: multiply, screen, darken, and lighten. Applying these to the top element of a stack of image and text, text being at top, creates the knockout design. Even though, in most cases, either black or white is used in these blend modes to get a clear distinction between…

Read More →

Some Things I Recommend

Howdy. I’m taking this week’s “Sponsored Post” to give a shout out to some apps, courses, and services that I personally like. These things also have affiliate programs, meaning if you buy the thing, we earn a portion of that sale, which supports this site. That money goes to pay people to write the things we publish. That said, everything on this list is something that I’m happy going on the record endorsing. PixelSnap: A macOS Toolbar app for getting pixel dimensions from anywhere on the screen. Way handier than trying to use ⌘-⇧-4 for that. An Introduction to Gutenberg by Joe Casabona: We just had a ShopTalk episode about how Gutenburg (a new editor) is coming to WordPress. There is certainly stuff to learn, and this is a course you can take to do that learning. React for Beginners: Speaking of learning, this Wes Bos course will get you…

Read More →

The Red Reveal: Illusions on the Web

In part one of a series of posts about optical illusions on the web, Dan Wilson looks at how to create the “Red Reveal” that he happens to describe like this: 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. When you put the red lens over the card, the text would magically appear. Here’s one example of that effect from a nifty Pen: I’d also recommend reading part two in this series, Barrier Grid Animation, which uses a bunch of CSS techniques to trick your eye into seeing an animation of several static images. Direct Link to Article — Permalink The Red Reveal: Illusions on the Web is a post from…

Read More →

Direction Aware Hover Effects

This is a particular design trick that never fails to catch people’s eye! I don’t know the exact history of who-thought-of-what first and all that, but I know I have seen a number of implementations of it over the years. I figured I’d round a few of them up here. Noel Delagado See the Pen Direction-aware 3D hover effect (Concept) by Noel Delgado (@noeldelgado) on CodePen. The detection here is done by tracking the mouse position on mouseover and mouseout and calculating which side was crossed. It’s a small amount of clever JavaScript, the meat of which is figuring out that direction: var getDirection = function (ev, obj) { var w = obj.offsetWidth, h = obj.offsetHeight, x = (ev.pageX – obj.offsetLeft – (w / 2) * (w > h ? (h / w) : 1)), y = (ev.pageY – obj.offsetTop – (h / 2) * (h > w ? (w…

Read More →

The Best UX is No User Interface at All

I have been obsessed with User Interfaces (UI) for as long as I can remember. I remember marveling at the beauty that was Compaq TabWorks while I played “The Incredible Machine” and listened to “Tears For Fears—Greatest Hits” on the family computer. Don’t judge me—I was listening to “Mad World” way before Donny Darko and that creepy rabbit. If none of those references landed with you, it’s probably because I’m super old. In the words of George Castanza, “It’s not you, it’s me.” That’s another super old reference you might not get. You know what—forget all that, let’s move on. I really got into UI when I bought my own computer. I had joined the Coast Guard and saved a bunch of money during boot camp (when you can’t go shopping—you know—because of push-ups and stuff). I wanted to buy a Chevy Cavalier (sadly, that’s not a joke), but my…

Read More →

Back to Top