Smoke Transitions: Beginning of a Trend?

Website DesignAntonio Petre • June 02, 2016 • 3 minutes READ

A website homepage includes any number of features such as branding, icons or illustrations. Recently, we’ve seen a surge in the popularity of motion in web design; more sites are joining the party with subtle interaction designs and animations that make a fundamental difference, winning awards and the recognition of the community.

There are numerous to animate a page, but we might have found the start of a new trend involving an interesting and unusual kind of page transition and effects that are very satisfying, especially when we’re using motion animation to tell stories — smoke-style transitions.

Sevenhills Wholefoods

Sevenhills Wholefoods is a virtual farmers market and they help to make a difference to the lives of their customers through the health-enhancing whole foods. What’s the best solution to present their product other than to use a technique called story-centered design? They’ve created a series of narrative use-cases for their product that illustrate every step in the user’s journey. But what captivated our attention is every time you switch to “Explore the journey,” a smoke/paint transition kicks in, switching smoothly between the two ways of exploring the story you have at your disposal.

They’ve won a Site of the Day, Developer Award from Awwwards.com, Site of the Day from theFWA.com and Site of the Day from cssdesignawards.com in March. Well done, guys!

Robin Mastromarino

Robin Mastromarino is a french UX/UI designer with a hot presentation website illustrating his work. Robin’s site one is our favorites, not just because he uses a straightforward design, but it is well executed and because of that he proves our point: Smoke transitions are very nice and Robin took advantage of that.

Robin Mastromarino won in April Site of the Day from awwwards.com, Mobile of the Day from theFWA.com, Website of the Day from cssdesignawards.com, Site of the Day with cssawds.com so far. Congrats, mate!

Trainrobber

I’d call this one “smoke transitions on steroids.” Trainrobber is a team of “dangerous virtual storytellers” and they use parallax like navigation and a lot of smoke.

They have won in April a Site of the Day from awwwards.com and a Site of the Day from theFWA.com. Nicely done!

Cavalier

Cavalier is an experiment masked into a game, made by yourmajesty.co to test the latest web technologies. The smoke transition style is present. (On a side note, I scored only 42 points.)

For the geeks out there, here’s a list with what they’ve used to create the effect: HTML5, CSS3, WebGL, Pixi, JavaScript, three.js, SVG animation, bodymovin.js, howler.js, 3D audio, WebAudio, GSAP.

They’ve won in May a Site of the Day from awwwards.com, a Site of the Day from theFWA.com and a Website of the Day from cssdesignawards.com. Very nice!

National Geographic

National Geographic wrote an article about how it is to be a bear in Yellowstone. I don’t care about bears; what I care about is how nicely they’ve put together this story and made it an interesting experience. They’ve combined good techniques and used “smoke transitions” to reveal pictures of bears. Nonetheless, this is a good example of how you can achieve a great experience and create a memorable web story.

As a conclusion, if we draw a line, what do all these website concepts have in common? Well … they have won awards.

Here are some resources to explore:

Smoke Effects in CSS and JavaScript

Pixi.js

If we missed some websites which use the same kind of effects and it’s worth mentioning, please share a link in the comments.

What are your thoughts regarding this style, do you think smoke transitions have traction, or you is there some other element worthy of calling the next new trend?