Select Page

Category: Animation

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...

Read More

Web Animation Workshops Dates for 2018 Announced

“I’m getting a raise!” This was my favorite quote from last year’s Web Animation Workshops, as Val and I covered performance, tooling, and creating animations for SVG, CSS, JS and React. Now we’re gearing up for another round of Web Animation Workshops in 2018! But we’re only offering two workshops this time since both of us have moved away from full-time consulting. The aim of these workshops is to level up your animation skills in just two days and equip you with a full understanding of animation concepts without having to rely on copying and pasting code from other people in your web applications. These are the dates and locations: Chicago: March 19 – 20 Brighton, UK: July 9 – 10 We’re already out of early bird tickets for Chicago and space is limited, so grab yours quickly before they sell out. We’ll see you there! Direct Link to Article — Permalink Web Animation Workshops Dates for 2018 Announced is a post from CSS-Tricks...

Read More

Robust React User Interfaces with Finite State Machines

User interfaces can be expressed by two things: The state of the UI Actions that can change that state From credit card payment devices and gas pump screens to the software that your company creates, user interfaces react to the actions of the user and other sources and change their state accordingly. This concept isn’t just limited to technology, it’s a fundamental part of how everything works: For every action, there is an equal and opposite reaction. – Isaac Newton This is a concept we can apply to developing better user interfaces, but before we go there, I want...

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...

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 Craig Roblewsky is a great example of the types of complex animations I want to help you build. This article is intended for those who have a basic understanding of GSAP and want to approach their code in a smarter, more efficient way. However, even if you haven’t used GSAP, or prefer another animation tool, I think you’ll be intrigued by these solutions to some of the common problems that all animators face. Sit back, watch and enjoy! Video...

Read More