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.


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 →

Building Performant Expand & Collapse Animations

It’s starting to be pretty common knowledge that there are only 2 things you can animate cheaply in CSS: opacity and transforms. Anything else, you run a high risk of that animation/transition being choppy. Fortunately, there is a ton of animation possibility with those properties, especially since transform can move and resize elements any-which-way. You can even get tricky and fake the animating of other properties with transforms. In this tutorial on the Google Chrome Developers Blog, Paul Lewis and Stephen McGruer explain how you can use a vertical scale transform to fake a height animation, while simultaneously triggering a vertical scale transform the other direction so nothing looks squished. It’s clever, performant, and useful. I moved a copy to CodePen to play with. It sure is a bunch of code for such a simple result, though. What I’d prefer to do as a developer is just have that click…

Read More →

Tips for Landing a Design Job

When we’re looking for design candidates, I spend a good chunk of time combing portfolios and creeping around LinkedIn. It brings back memories of how I felt at the start of my career. Namely… confused and overwhelmed, with no clue what a future employer might be looking for beyond my degree and GPA. (Two things that don’t matter nearly as much as I thought.) I see a lot of missteps that could easily be avoided. So here are a few tips on landing your next design job: Show the work you want to do The importance of a good online portfolio cannot be understated. We look at an applicant’s portfolio before anything else, including cover letters and resumes. Those have to be good too, but first we want to see your skills and creativity. If you’re applying for a web design job, make sure web design examples are a prominent…

Read More →

Creating a Book Cover Using JavaScript and p5.js

I recently published a book and an interactive course called Coding for Visual Learners. It teaches coding to beginners from scratch using the widely popular JavaScript programming language and the p5.js programming library. Since p5.js a great and an easy to use drawing library, I wanted to make use of it to create the cover of my book and course as well. This is a tutorial on how to create this particular visual using JavaScript and p5.js. p5.js is a drawing & creative coding library that is based on the idea of sketching. Just like how sketching can be thought of as a minimal approach to drawing to quickly prototype an idea, p5.js is built on the concept of writing the minimal amount of code to translate your visual, interaction or animation ideas to the screen. p5.js is a JavaScript implementation of the popular library called Processing which is based…

Read More →

Animation vs Still Images: Which One Wins?

Advertisers are constantly looking for new creative ideas to apply to Facebook Ads. And there’s a good reason for that: if people see your ads too many times, they’ll develop ad fatigue, resulting in higher ad costs. If you haven’t yet heard of the latest Facebook news, here’s something you should know: Facebook now allows the use of GIFs in video ads. We were curious to find out whether animated images really outperform still images in terms of click-through rate and cost-per-click. So, we set up a Facebook Ads A/B test to find out what works best: ads with still or animated images? And we discovered that… Well, now we can only tell you that the experiment’s outcome was surprising. To find out all the dirty details, read the full article and learn the secret! Hypothesis and Experiment Set Up We hypothesized that using animated Facebook Ads images would result in…

Read More →

Animate in Ajax’d Content to its Natural Height

Let’s combine three things we just learned here on CSS-Tricks: One, transitioning to auto dimensions. Two, Ajaxing for stuff in a modern way. Three, waiting for images to be loaded to measure them. With all these three things in our toolbox, we can Ajax for some arbitrary content and insert it onto the page with a revealing height animation. Tricky tricky! Here’s the final demo: See the Pen Slide in Ajax Content by Chris Coyier (@chriscoyier) on CodePen. The thinking here is that since we’re guaranteed to be using JavaScript anyway, since we’re Ajaxing for some content, we might as well keep using JavaScript to help us make a smooth transition. In the grand tradition of “writing a script”, here’s ours: Ajax for the stuff Make a dummy element that is exactly as wide as where you plan to inject the stuff Inject your stuff into the dummy element Measure…

Read More →

Minecraft in WebVR with HTML Using A-Frame

I’m Kevin Ngo, a virtual reality web developer on the Mozilla VR team and a core developer of A-Frame. Today, we’ll go over how to build a room scale WebVR Minecraft demo that works on HTC Vive, Oculus Rift, Samsung GearVR, Google Cardboard, desktop, and mobile. The demo will be built with A-Frame in just 11 HTML elements! A-Frame A few years ago, Mozilla invented and pioneered WebVR, a JavaScript API for creating immersive VR experiences in your browser, in an experimental build of Firefox. Since then, WebVR has gained wide support from other companies such as Google, Microsoft, Samsung, and Oculus. And it’s now set to release enabled by default in Firefox within a few months! Why WebVR? The Web brings openness to VR; on the Web, content isn’t controlled by gatekeepers, and users aren’t kept in walled gardens. The Web also brings connectedness to VR; on the Web,…

Read More →

Using CSS Transitions on Auto Dimensions

We’ve all been there. You’ve got an element you want to be able to collapse and expand smoothly using CSS transitions, but its expanded size needs to be content-dependent. You’ve set transition: height 0.2s ease-out. You’ve created a collapsed CSS class that applies height: 0. You try it out, and… the height doesn’t transition. It snaps between the two sizes as if transition had never been set. After some fiddling, you figure out that this problem only happens when the height starts out or ends up as auto. Percentages, pixel values, any absolute units work as expected. But all of those require hard coding a specific height beforehand, rather than allowing it to naturally result from the size of the element content. Nikita Vasilyev documented this well. In this article I mostly speak in terms of height for simplicity, but everything here also applies to width. If you were hoping…

Read More →

An Event Apart Seattle – April 3-5, 2017

An Event Apart Seattle is coming up! Less than a month away. If you’ve been trying to decide, now is the time to pull the trigger before it sells out. I’ll be there doing three official things. One, I’ll be speaking. Two, I’ll be giving a workshop on the last day. Three, I’ll be on a discussion panel talking about staying on top of this field. The workshop on the final day is called A Day Apart, and you buy tickets for the conference and the workshop separately or as a package deal. If you’d be just visiting Seattle, that’s perfect, as the event is perfectly situated to enjoy a lot of the best of Seattle. The lineup is excellent. Sarah Parmenter: Practical Branding Krystal Higgins: Onboarding for Any Situation Luke Wroblewski: Obvious Always Wins Val Head: Motion In Design Systems: Animation, Style Guides, and the Design Process Ethan Marcotte:…

Read More →

An Animated Intro to RxJS

You might have heard of RxJS, or ReactiveX, or reactive programming, or even just functional programming before. These are terms that are becoming more and more prominent when talking about the latest-and-greatest front-end technologies. And if you’re anything like me, you were completely bewildered when you first tried learning about it. According to ReactiveX.io: ReactiveX is a library for composing asynchronous and event-based programs by using observable sequences. That’s a lot to digest in a single sentence. In this article, we’re going to take a different approach to learning about RxJS (the JavaScript implementation of ReactiveX) and Observables, by creating reactive animations. Understanding Observables An array is a collection of elements, such as [1, 2, 3, 4, 5]. You get all the elements immediately, and you can do things like map, filter and map them. This allows you to transform the collection of elements any way you’d like. Now suppose…

Read More →

An Introduction to the Reduced Motion Media Query

The open web’s success is built on interoperable technologies. The ability to control animation now exists alongside important features such as zooming content, installing extensions, enabling high contrast display, loading custom stylesheets, or disabling JavaScript. Sites all too often inundate their audiences with automatically playing, battery-draining, resource-hogging animations. The need for people being able to take back control of animations might be more prevalent than you may initially think. A brief history of Reduced Motion When it was released in 2013, iOS 7 featured a dramatic reworking of the operating system’s visuals. Changes included translucency and blurring, a more simplified “flat” user interface, and dramatic motion effects such as full-screen zooming and panning. While the new look was generally accepted, many people using the updated operating system reported experiencing motion sickness and vertigo. User interface movement didn’t correspond with users’ feeling of movement or spatial orientation, triggering the reported effects.…

Read More →

An Introduction to the Reduced Motion Media Query

The open web’s success is built on interoperable technologies. The ability to control animation now exists alongside important features such as zooming content, installing extensions, enabling high contrast display, loading custom stylesheets, or disabling JavaScript. Sites all too often inundate their audiences with automatically playing, battery-draining, resource-hogging animations. The need for people being able to take back control of animations might be more prevalent than you may initially think. A brief history of Reduced Motion When it was released in 2013, iOS 7 featured a dramatic reworking of the operating system’s visuals. Changes included translucency and blurring, a more simplified “flat” user interface, and dramatic motion effects such as full-screen zooming and panning. While the new look was generally accepted, many people using the updated operating system reported experiencing motion sickness and vertigo. User interface movement didn’t correspond with users’ feeling of movement or spatial orientation, triggering the reported effects.…

Read More →

An Introduction to Thinking About Animation on the Web

Movement is everywhere around us, and sometimes we forget it as a form of communication. From body language to the way gravity works — movement can tell us a person’s emotions and what actions are about to occur.  This is no different on the web. Abrupt interactions and page loads are jarring and create a disjointed experience. With the growth of web technology, animation on the web is becoming much easier. We can use Javascript, CSS, and a slew of programs to help showcase dynamic and subtle interactions to tell more compelling stories on the web. There are great articles that compile the different technologies we can use. However, thinking about animation for the first time can be difficult. Where should we have animation?How fast should this move?Should it feel bouncy or rigid?Should it ease in or ease out?Should we have animation at all? Goal Oriented Animation If you can’t rationalize any of…

Read More →

Back to Top