Smoke Transitions: Beginning of a Trend?

  •  11 Comments

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

Smoke Effects in CSS and JavaScript

Pixi.js

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?

Newsletter

11 Comments
  1. theo Jun 4, 7:04 pm

    I hope these .webm vids are awesome, sad I can’t see them in Safari.

  2. Robert I. Jun 4, 7:41 pm

    Love the effect. Can’t wait to try it out!

  3. Nigel Wade Jun 5, 4:30 pm

    That designer’s site is using 2.3MB of images (50% of the sites initial payload) to transition between about 300kB of images. I really hope this is not a trend that catches on…

  4. Ty Cahill Jun 7, 5:35 pm

    The effect only works for very specific types of sites. Of course, it can be abused by every noob out there, but I just don’t see this becoming a real trend across the web. Maybe in certain narrow verticals and niche sites, but not wide-spread.

  5. Antonio Petre Jun 7, 10:47 pm

    I can’t argue with you Nigel about site performances, by all means we want fast websites. But I think we should think about a sites job too rather than evaluate all the same.

    As Ty is suggesting and very much yourself, I would start to worry if this is going to get implemented poorly on higher scale.

  6. Su Hall Jun 22, 4:56 pm

    Pretty cool! From my perspective, though, not a web designer, it seems a bit tedious to find what I want. It is even a bit difficult to discern what they have to offer as far as services, or material. Perhaps it is my pc. Or, my mouse’s sensitivity. I dunno. It’s really neat, but, for me, not very practical.
    Thank you for the read and share!

    Su

  7. Adiel Hercules Jun 22, 5:38 pm

    I’ve found some similar effects implementation on codyhouse.co, nthey were inspired by trainrobber.com too, you can see the demos here: https://codyhouse.co/gem/ink-transition-effect/ and some others (but not smoke) https://codyhouse.co/gem/animated-transition-effects/

  8. João de Almeida Jun 22, 6:15 pm

    What about the original one (Jack Daniels) from MediaMonks?

  9. ben joe Jun 22, 8:06 pm

    The effect only works for very specific types of sites. Of course, it can be abused by every noob out there, but I just don’t see this becoming a real trend across the web. Maybe in certain narrow verticals and niche sites, but not wide-spread.

  10. W Jun 22, 11:15 pm

    This website doesn’t work with Safari… sort of reminds me of the Netscape vs. Internet Explorer times. And all linked sites take ages to load.

    I like nice effects and I’m all for design exploring new ways to communicate content, but this needs work…

Leave a Reply

*
* Minimum length: 20 characters

Download Web Design Freebies & Resources

psd

Please Confirm Your Email!