State of Experiential Sites
Managing Transition States
Oh how I miss the good old days. The days of Flash and “experiential” websites. These types of sites typically supported richer media of a higher caliber, and thus, captured the users attention and left an impact. In those days, we created environments with sound and motion to get our client’s message across. It was a real blend of art and technology. Knowledge of motion theory and sound were valuable assets to have.
With the departure of Flash, so went the big, engaging sites. Clients needed their message to go out, but the vessel (Flash plugin) that once carried that experience was dying and we were forced to develop for the lowest common denominator ( IE8 ). In order to pull off that type of experience, development efforts needed to be split to support all browsers and mobile devices in the form of responsive websites. The only great experiences left had huge “Powered by Chrome” logos anchored at the bottom of the page.
Those days are back!
It’s been a long road traveled to get to where we are but the eco system is now primed. Many things have happened to get here. To list a few: Microsoft now forces people to update older version of Windows, these updates include version of IE that follow W3C standards. Mobile phones support WebGL (except for Opera Mini, but who uses Opera Mini anyhow?) and are now changing policies on video playback, libraries like PIXI.js have matured (currently on version 4) and the community behind it is huge. Penetration rates for these technologies, which have reached 89% at the time of this writing, allow us to deliver those experiences to a vast audience.
So what now? We MOVE!
Have you ever heard of technological pendulums? Mainframe computers brought forth the personal computer, only to return as mega-server for a network of Internet desktops. Desktop Applications, brought forth Rich Internet Applications, which brought forth Mobile applications, which has paved the way for Progressive Web Apps.
It’s been my opinion that the pendulum is swinging the other way in terms of experiential websites so it’s time to prepare. For those of us that remember the good old days, it’s time to reach back into our bag of tricks. It’s time to rethink how we package a message. It’s time to make thing move in a methodical and beautiful fashion. We do this by bringing back motion, audio and really thinking about how this affects the user’s experience.
Managing that Motion
I’d like to change gears now, away from the theoretical, and bring some practicality to this article. I’d like to offer some real help with managing that motion. Developers are very familiar with animation libraries like TweenMax, but the library I’m introducing below, is more for compartmentalizing your animations into States.
Recently, our development team started using Vue.js. This framework manages transitions via the transition component. We now manage our transitions between components like this:
beforeEnter: function (el) {// ...},enter: function (el, done) {// ...done()},afterEnter: function (el) {// ...}
This type of state management is a vital part of building experiential websites. We can effectively tell a story without pulling the user out of it with a hard page load. For an example of what I’m talking about visit the The FWA on any given day. Mustang recently created a great experience specifically made for mobile phone:
Outside of Vue components however, your options for managing those transitions are limited. In order to remedy this, I ported over some code I created more than a few years back when learning about design patterns and state machines. I’m not introducing a new concept to development. This type of State Management has been around for a very long time. This library is just a simple implementation of that concept. You can install it via:
$npm install 5ndn-fsmThe repository is here:
Transitions are again a first class citizen and as such, we need a clean and clear way to handle them. Using these types of packages are a great way to help compartmentalize your code.
My hope is that , other developers find this library useful and use it in their own projects. If you do use it, don’t hesitate to send me a message. I have a hat at home I’ve been trying to fit into.
What’s next?
We’re still missing the tools! We need to bring back the visual timeline!
Flash is still out there but Javascript community has changed and it will take some work to get behind a tool like this. Ideally these tools would export to popular frameworks like PIXI.js and Three.js — frameworks the community is already familiar with.
