Category Archive for: 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.


Building Skeleton Screens with CSS Custom Properties

Designing loading states on the web is often overlooked or dismissed as an afterthought. Performance is not only a developer’s responsibility, building an experience that works with slow connections can be a design challenge as well. While developers need to pay attention to things like minification and caching, designers have to think about how the UI will look and behave while it is in a “loading” or “offline” state. The illusion of Speed As our expectations for mobile experiences change, so does our understanding of performance. People expect web apps to feel just as snappy and responsive as native apps, regardless of their current network coverage. Perceived performance is a measure of how fast something feels to the user. The idea is that users are more patient and will think of a system as faster if they know what’s going on and can anticipate content before it’s actually there. It’s…

Read More →

Fantastic Techniques In Designing 404 Error Pages

Chances are, you’ve probably encountered a lot of 404 error pages at least once in your online browsing experience. These pages are signals that reveal something wrong in the website, resulting in browsing interruptions. While it can be pretty disappointing to get stuck in these error pages, website owners can actually use them to entertain their visitors or provide important bits of information. Design Ideas For Your 404 Error Pages Here are some design techniques to turn your otherwise a discouraging 404 error into an entertaining – and lead-generating – page on your site: 1. Choose a catchy line from a popular song http://studiogewoon.nl/404 If there is one thing that will keep your visitors entertained even when they stumble upon your site’s 404 error page, that’s a memorable line from famous songs. This is a clever way to make your visitors stay, because it is likely that they will enjoy…

Read More →

Creating Photorealistic 3D Graphics on the Web

Before becoming a web developer, I worked in the visual effects industry, creating award-winning, high-end 3D effects for movies and TV Shows such as Tron, The Thing, Resident Evil, and Vikings. To be able to create these effects, we would need to use highly sophisticated animation software such as Maya, 3Ds Max or Houdini and do long hours of offline rendering on Render Farms that consisted of hundreds of machines. It’s because I worked with these tools for so long that I am now amazed by the state of the current web technology. We can now create and display high-quality 3D content right inside the web browser, in real time, using WebGL and Three.js. Here is an example of a project that is built using these technologies. You can find more projects that use three.js on their website. Some projects using three.js As the examples on the three.js website demonstrate,…

Read More →

How to be evil (but please don’t!) – the modals & overlays edition

We’ve all been there. Landed on a website only to be slapped with a modal that looked something like the one below: Hello darkness, my old friend. For me that triggers a knee-jerk reaction: curse for giving them a pageview, close the tab, and never return. But there’s also that off case when we might actually try to get to the info behind that modal. So the next step in this situation is to bring up DevTools in order to delete the modal and overlay, and maybe some other useless things that clutter up the page while we’re at it. This is where that page starts to dabble in evil. We may not be able to get to the DevTools via “Inspect Element” because the context menu might be disabled. That one is easy, it only takes them one line of code: addEventListener(‘contextmenu’, e => e.preventDefault(), false); But hey, no…

Read More →

Simple Server Side Rendering, Routing, and Page Transitions with Nuxt.js

A bit of a wordy title, huh? What is server side rendering? What does it have to do with routing and page transitions? What the heck is Nuxt.js? Funnily enough, even though it sounds complex, working with Nuxt.js and exploring the benefits of isn’t too difficult. Let’s get started! Server side rendering You might have heard people talking about server side rendering as of late. We looked at one method to do that with React recently. One particularly compelling aspect is the performance benefits. When we render our HTML, CSS, and JavaScript on the server, we often have less JavaScript to parse both initially and on subsequent updates. This article does really well going into more depth on the subject. My favorite takeaway is: By rendering on the server, you can cache the final shape of your data. Instead of grabbing JSON or other information from the server, parsing it,…

Read More →

A Collection of Interesting Facts about CSS Grid Layout

A few weeks ago I held a CSS Grid Layout workshop. Since I’m, like most of us, also pretty new to the topic, I learned a lot while preparing the slides and demos. I decided to share some of the stuff that was particularly interesting to me, with you. Have fun! Negative values lower than -1 may be used for grid-row-end and grid-column-end In a lot of code examples and tutorials you will see that you can use grid-column-start: 1 and grid-column-end: -1 (or the shorthand grid-column: 1 / -1) to span an element from the first line to the last. My friend Max made me aware that it’s possible to use lower values than -1 as well. .grid-item { grid-column: 1 / -2; } For example, you can set grid-column: 1 / -2 to span the cells between the first and the second to last line. See the Pen…

Read More →

(Now More Than Ever) You Might Not Need jQuery

The DOM and native browser API’s have improved by leaps and bounds since jQuery’s release all the way back in 2006. People have been writing “You Might Not Need jQuery” articles since 2013 (see this classic site and this classic repo). I don’t want to rehash old territory, but a good bit has changed in browser land since the last You Might Not Need jQuery article you might have stumbled upon. Browsers continue to implement new APIs that take the pain away from library-free development, many of them directly copied from jQuery. Let’s go through some new vanilla alternatives to jQuery methods. Remove an element from the page Remember the maddeningly roundabout way you had to remove an element from the page with vanilla DOM? el.parentNode.removeChild(el);? Here’s a comparison of the jQuery way and the new improved vanilla way. jQuery: var $elem = $(“.someClass”) //select the element $elem.remove(); //remove the…

Read More →

Why Are Cinemagraphs Trending in Web Design?

Do you still remember the time when animated GIFs were all the rage in websites? Although web design standards have drastically changed since then, the attraction potential of moving images cannot be denied. That’s why a lot of websites continue to use animation, and one awesome web design trend these days is the use of cinemagraphs. What are Cinemagraphs? Cinemagraphs have been making significant noise lately, and are being used across several websites and social media campaigns. A lot of companies have joined the bandwagon of integrating cinemagraphs into their website, such as Budweiser, Coca-Cola, Chanel, Netflix, and Wal-Mart, to name a few. In a nutshell, a cinemagraph is a still photo but with subtle movements being looped continuously. The technique was the brainchild of American photographers Kevin Burg and Jamie Beck, who set out to animate photographs starting in 2011. By Johan Blomström, CC BY 2.0, Link Cinemagraphs hit…

Read More →

Repeatable, Staggered Animation Three Ways: Sass, GSAP and Web Animations API

Staggered animation, also known as “follow through” or “overlapping action” is one of the twelve Disney principles of animation as defined by Ollie Johnston and Frank Thomas in their 1981 book “The Illusion of Life”. At its core, the concept deals with animating objects in delayed succession to produce fluid motion. The technique doesn’t only apply to cute character animations though. The Motion design aspect of a digital interface has significant implications on UX, user perception and “feel”. Google even makes a point to mention staggered animation in its Motion Choreography page, as part of the Material Design guide: While the topic of motion design is truly vast, I often find myself applying bits and pieces even in smallest of projects. During the design process of the Interactive Coke ad on Eko I was tasked with creating some animation to be shown as the interactive video is loading, and so…

Read More →

Move Modal in on a Path

Have you seen those fancy interactions where a modal window flys down from the top of the page? Maybe it slides in from the side while it fades up to full opacity? Maybe it falls in from above and goes from blurry to focused? Kinda cool, if it fits the vibe of your website. They always seem to move in a straight line though. Thanks to the fairly new offset-path, they don’t have to! The offset-path property in CSS exists so that you can place an element in some position along a path. Like, the same path syntax we’re used to from SVG. Here’s a super simple path. Literally just two instructions: <path d=”M 250,100 S -300,500 -700,-200″></path> See the Pen A very simple path. by Chris Coyier (@chriscoyier) on CodePen. I can move that path data right over to CSS and animate along a path there: See the Pen…

Read More →

Connect: behind the front-end experience

Some fantastic behind-the-scenes stuff about Stripe’s design work by Benjamin De Cock. Absolutely everything is clever and using very modern techniques. Using CSS grid for their iconic background stripes Using 3D cubes for aesthetic flair Using reduced motion media queries to accommodate that preference Using the Web Animation API for event-triggered keyframe-like animations in JavaScript Plus one I’d never seen before: Connect’s landing page uses the new Intersection Observer API which provides a much more robust and performant way to detect the visibility of an element … The observeScroll helper simplifies our detection behavior (i.e. when an element is fully visible, the callback is triggered once) without executing anything on the main thread. Direct Link to Article — Permalink Connect: behind the front-end experience is a post from CSS-Tricks Source: CssTricks

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 →

Back to Top