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.


How the Roman Empire Made Pure CSS Connect 4 Possible

Experiments are a fun excuse to learn the latest tricks, think of new ideas, and push your limits. “Pure CSS” demos have been a thing for a while, but new opportunities open up as browsers and CSS itself evolves. CSS and HTML preprocessors also helped the scene move forward. Sometimes preprocessors are used for hardcoding every possible scenario, for example, long strings of :checked and adjacent sibling selectors. In this article, I will walk through the key ideas of a Pure CSS Connect 4 game I built. I tried to avoid hardcoding as much as I could in my experiment and worked without preprocessors to focus on keeping the resulting code short. You can see all the code and the game right here: See the Pen Pure CSS Connect 4 by Bence Szabó (@finnhvman) on CodePen. Essential concepts I think there are some concepts that are considered essential in the…

Read More →

Triggering Individual Animations on a Timeline with Bodymovin.js

In our recent collaboration with the Ad Council and AARP, we created a chatbot experience to walk users through a set of questions and serve them personalized action items to prepare for retirement. The tricky thing about retirement is that few people are truly prepared for it. To address this issue, we created an animated character that felt alive, showed empathy, and helped users stay engaged with the conversation. It’s name? Avo! Below is a set of emotions we needed to animate and bring into our web experience. Enter Bodymovin.js. Bodymovin is an After Effects plugin that exports animation data and translates it into Javascript. Bodymovin is exceptional when animating complex vector-based animations, especially with all the parts of Avo’s face. Because we had to convey many emotions, we needed a way to link them all together without distracting the user. Our approach was to have every animation return to…

Read More →

Getting Ready for Web Video

Inspired Magazine Inspired Magazine – creativity & inspiration daily Video is one of those really contentious points about web design. There are some people who feel like web pages should not have embedded video at all. These people are wrong. Like any technology, however, we should respect it and not abuse it. The two worst things you can do are: AutoPlay videos, without express consent from the user Embed too many videos in one page Both of these things are likely to cause annoyance to users and should be avoided unless you have a very good reason. Knowing what not to do will only get you so far. The rest of your online video success story will depend on knowing the things you ought to do, which is what we’ll cover in the rest of this article. Video categories There are six different types of videos that are commonly used…

Read More →

Animating Layouts with the FLIP Technique

User interfaces are most effective when they are intuitive and easily understandable to the user. Animation plays a major role in this – as Nick Babich said, animation brings user interfaces to life. However, adding meaningful transitions and micro-interactions is often an afterthought, or something that is “nice to have” if time permits. All too often, we experience web apps that simply “jump” from view to view without giving the user time to process what just happened in the current context. This leads to unintuitive user experiences, but we can do better, by avoiding “jump cuts” and “teleportation” in creating UIs. After all, what’s more natural than real life, where nothing teleports (except maybe car keys), and everything you interact with moves with natural motion? In this article, we’ll explore a technique called “FLIP” that can be used to animate the positions and dimensions of any DOM element in a…

Read More →

Declining Complexity in CSS

The fourth edition of Eric Meyer and Estelle Weyl’s CSS: The Definitive Guide was recently released. The new book weighs in at 1,016 pages, which is up drastically from 447 in the third edition, which was up slightly from 436 in the second edition. Despite the appearance of CSS needing more pages to capture more complicated concepts, Eric suggests that CSS is actually easier to grasp than ever before and its complexity has actually declined between editions: But the core principles and mechanisms are no more complicated than they were a decade or even two decades ago. If anything, they’re easier to grasp now, because we don’t have to clutter our minds with float behaviors or inline layout just to try to lay out a page. Flexbox and Grid (chapters 12 and 13, by the way) make layout so much simpler than ever before, while simultaneously providing far more capability…

Read More →

Recreating the Apple Watch Breathe App Animation

The Apple Watch comes with a stock app called Breathe that reminds you to, um, breathe. There’s actually more to it than that, but the thought of needing a reminder to breathe makes me giggle. The point is, the app has this kinda awesome interface with a nice animation. Photo courtesy of Apple Support I thought it would be fun to recreate the design in vanilla CSS. Here’s how far I got, which feels pretty close. See the Pen Apple Watch Breathe App Animation by Geoff Graham (@geoffgraham) on CodePen. Making the circles First things first, we need a set of circles that make up that flower looking design. The app itself adds a circle to the layout for each minute that is added to the timer, but we’re going to stick with a static set of six for this demo. It feels like we could get tricky by using…

Read More →

Creating a Star to Heart Animation with SVG and Vanilla JavaScript

In my previous article, I’ve shown how to smoothly transition from one state to another using vanilla JavaScript. Make sure you check that one out first because I’ll be referencing some things I explained there in a lot of detail, like demos given as examples, formulas for various timing functions or how not to reverse the timing function when going back from the final state of a transition to the initial one. The last example showcased making the shape of a mouth to go from sad to glad by changing the d attribute of the path we used to draw this mouth. Manipulating the path data can be taken to the next level to give us more interesting results, like a star morphing into a heart. The star to heart animation we’ll be coding. The idea Both are made out of five cubic Bézier curves. The interactive demo below shows…

Read More →

Emulating CSS Timing Functions with JavaScript

CSS animations and transitions are great! However, while recently toying with an idea, I got really frustrated with the fact that gradients are only animatable in Edge (and IE 10+). Yes, we can do all sorts of tricks with background-position, background-size, background-blend-mode or even opacity and transform on a pseudo-element/ child, but sometimes these are just not enough. Not to mention that we run into similar problems when wanting to animate SVG attributes without a CSS correspondent. Using a lot of examples, this article is going to explain how to smoothly go from one state to another in a similar fashion to that of common CSS timing functions using just a little bit of JavaScript, without having to rely on a library, so without including a lot of complicated and unnecessary code that may become a big burden in the future. This is not how the CSS timing functions work.…

Read More →

Creating Vue.js Transitions & Animations

My last two projects hurled me into the JAMstack. SPAs, headless content management, static generation… you name it. More importantly, they gave me the opportunity to learn Vue.js. More than “Build a To-Do App” Vue.js, I got to ship real-life, production-ready Vue apps. The agency behind Snipcart (Spektrum) wanted to start using decoupled JavaScript frameworks for small to medium sites. Before using them on client projects, however, they chose to experiment on themselves. After a few of my peers had unfruitful experiences with React, I was given the green light to prototype a few apps in Vue. This prototyping morphed into full-blown Vue apps for Spektrum connected to a headless CMS. First, I spent time figuring out how to model and render our data appropriately. Then I dove head first into Vue transformations to apply a much-needed layer of polish on our two projects. I’ve prepared live demos on CodePen…

Read More →

Do Your Worst

My daughter is taking swimming lessons. She’s three. It hasn’t been going well. Tears. Fear about putting her face in the water. Dread about going to the next class. I found myself telling her the age old wisdom of “Do Your Best”, but I’m curious if that isn’t very good advice at all…The Simpsons is one of the most successful sitcoms and animated shows in history running 29 seasons so far. Each episode takes eight-to-nine months to create! That means many teams and people need to be involved to get an entire season manufactured.But this isn’t a story about The Simpsons. It’s about South Park.The most surprising thing to me about South Park is that a single episode takes 6 days. Sometimes even less. Of course the animation isn’t as sophisticated as The Simpsons. And I’m sure some would argue the writing isn’t either. But South Park has been going on 21…

Read More →

A Bone to Pick with Skeleton Screens

In the fight for the short attention span of our users, every performance gain, whether real or perceived, matters. This is especially true on mobile, where despite our best efforts at performance, a spotty signal can leave users waiting an interminable few seconds (or more) for content to load. Design’s conventional answer to unpredictable wait times has long been the loading spinner; a looping animation that tells the user to “Hold on. Something’s coming,” whether that something is one or ten seconds away. More recently, a design pattern known as progressive loading has gained popularity. With progressive loading, individual elements become visible on the page as soon as they’ve loaded, rather than displaying all at once. See the following example from Facebook: Progressive loading on the Facebook app In the Facebook example above, a skeleton of the page loads first. It’s essentially a wireframe of the page with placeholder boxes…

Read More →

The Art of Comments

I believe commenting code is important. Most of all, I believe commenting is misunderstood. I’m tentative to write this article at all. I am not a commenting expert (if there is such a thing) and have definitely written code that was poorly commented, not commented at all, and have written comments that are superfluous. I tweeted out the other day that “I hear conflicting opinions on whether or not you should write comments. But I get thank you’s from junior devs for writing them so I’ll continue.” The responses I received were varied, but what caught my eye was that for every person agreeing that commenting was necessary, they all had different reasons for believing this. Commenting is a more nuanced thing than we give it credit for. There is no nomenclature for commenting (not that there should be) but lumping all comments together is an oversimplification. The example in…

Read More →

Getting Nowhere on Job Titles

Last week on ShopTalk, Dave and I spoke with Mandy Michael and Lara Schenck. Mandy had just written the intentionally provocative “Is there any value in people who cannot write JavaScript?” which guided our conversation. Lara is deeply interested in this subject as well, as someone who is a job seeking web worker, but places herself on the spectrum as a non-unicorn. Part of that discussion was about job titles. If there was a ubiquitously accepted and used job title that meant you were specifically skilled at HTML and CSS, and there was a market for that job title, there probably wouldn’t be any problem at all. There isn’t though. “Web developer” is too vague. “Front-end developer” maybe used to mean that, but has been largely co-opted by JavaScript. In fact, you might say that none of us has an exactly perfect job title and the industry at large has…

Read More →

Writing Smarter Animation Code

If you’ve ever coded an animation that’s longer than 10 seconds with dozens or even hundreds of choreographed elements, you know how challenging it can be to avoid the dreaded “wall of code”. Worse yet, editing an animation that was built by someone else (or even yourself 2 months ago) can be nightmarish. In these videos, I’ll show you the techniques that the pros use keep their code clean, manageable, and easy to revise. Scripted animation provides you the opportunity to create animations that are incredibly dynamic and flexible. My goal is for you to have fun without getting bogged down by the process. We’ll be using GSAP for all the animation. If you haven’t used it yet, you’ll quickly see why it’s so popular – the workflow benefits are substantial. See the Pen SVG Wars: May the morph be with you. (Craig Roblewsky) on CodePen. The demo above from…

Read More →

You can get pretty far in making a slider with just HTML and CSS

A “slider”, as in, a bunch of boxes set in a row that you can navigate between. You know what a slider is. There are loads of features you may want in a slider. Just as one example, you might want the slider to be swiped or scrolled. Or, you might not want that, and to have the slider only respond to click or tappable buttons that navigate to slides. Or you might want both. Or you might want to combine all that with autoplay. I’m gonna go ahead and say that sliders are complicated enough of a UI component that it’s use JavaScript territory. Flickity being a fine example. I’d also say that you can get pretty far with a nice looking functional slider with HTML and CSS alone. Starting that way makes the JavaScript easier and, dare I say, a decent example of progressive enhancement. Let’s consider the…

Read More →

Building a Progress Ring, Quickly

On some particularly heavy sites, the user needs to see a visual cue temporarily to indicate that resources and assets are still loading before they taking in a finished site. There are different kinds of approaches to solving for this kind of UX, from spinners to skeleton screens. If we are using an out-of-the-box solution that provides us the current progress, like preloader package by Jam3 does, building a loading indicator becomes easier. For this, we will make a ring/circle, style it, animate given a progress, and then wrap it in a component for development use. Step 1: Let’s make an SVG ring From the many ways available to draw a circle using just HTML and CSS, I’m choosing SVG since it’s possible to configure and style through attributes while preserving its resolution in all screens. <svg class=”progress-ring” height=”120″ width=”120″ > <circle class=”progress-ring__circle” stroke-width=”1″ fill=”transparent” r=”58″ cx=”60″ cy=”60″ /> </svg>…

Read More →

Writing style

Was there a source for my writing style or was it self discovered?body[data-twttr-rendered=”true”] {background-color: transparent;}.twitter-tweet {margin: auto !important;}@natekontny as a follower of vlog, wanted to know, where did you pick up the style of writing from, was there any source, or self discovered — @seebiscutfunction notifyResize(height) {height = height ? height : document.documentElement.offsetHeight; var resized = false; if (window.donkey && donkey.resize) {donkey.resize(height); resized = true;}if (parent && parent._resizeIframe) {var obj = {iframe: window.frameElement, height: height}; parent._resizeIframe(obj); resized = true;}if (window.location && window.location.hash === “#amp=1” && window.parent && window.parent.postMessage) {window.parent.postMessage({sentinel: “amp”, type: “embed-size”, height: height}, “*”);}if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.resize) {window.webkit.messageHandlers.resize.postMessage(height); resized = true;}return resized;}twttr.events.bind(‘rendered’, function (event) {notifyResize();}); twttr.events.bind(‘resize’, function (event) {notifyResize();});if (parent && parent._resizeIframe) {var maxWidth = parseInt(window.frameElement.getAttribute(“width”)); if ( 500 < maxWidth) {window.frameElement.setAttribute(“width”, “500”);}}Surprise!Adapted from Gage SkidmoreMy dad loves talk radio. I remember as a kid driving around with him and the car tuned to WGN an AM station based here…

Read More →

Making a Pure CSS Play/Pause Button

Globally, the media control icons are some of the most universally understood visual language in any kind of interface. A designer can simply assume that every user not only knows ▶️ = play, but that users will seek out the icon in order to watch any video or animation. Reportedly introduced in the 1960s by Swedish engineer Philip Olsson the play arrow was first designed to indicate the direction where the tape would go when reading on reel-to-reel tape players. Since then, we switched from cassettes to CDs, from the iPod to Spotify, but the media controls icons remain the same. The play ▶️ icon is standard symbol (with its own unicode) of starting an audio/video media along with the rest of the symbols like stop, pause, fast-forward, rewind, and others. There are unicode and emoji options for play button icons, but if you wanted something custom, you might reach…

Read More →

Creating Your First WebVR App using React and A-Frame

Today, we’ll be running through a short tutorial on creating our own WebVR application using A-Frame and React. We’ll cover the setup process, build out a basic 3D scene, and add interactivity and animation. A-Frame has an excellent third-party component registry, so we will be using some of those in addition to writing one from scratch. In the end, we’ll go through the deployment process through surge.sh so that you can share your app with the world and test it out live on your smartphone (or Google Cardboard if you have one available). For reference, the final code is in this repo. Over the course of this tutorial, we will be building a scene like this. Check out the live demo as well. Exciting, right? Without further ado, let’s get started! What is A-Frame? A-Frame is a framework for building rich 3D experiences on the web. It’s built on top…

Read More →

Back to Top