What we think, we become.Gautama Buddha
Recently I’ve been exposed to several examples of word fade-in effects on the web, reflecting the kind of visual effect you might associate with certain kinds of fantasy or suspense films. So far the solutions I’ve seen have all required a lot of markup and some heavy lifting with frameworks, but I realised that the effect could easily be recreated with JavaScript and the Web Animation API:
While playing around with the Web Animation API it occurred to me that it might also be used for SVG line animations; I decided to apply it to an interactive roadtrip passing through three locations in my home country of New Zealand.
This interactive is also progressive on mobile, in the sense that smaller devices do not attempt to show the map and locations in their limited viewports, but only show the location details.
Inspired by a popular Mac OS X screensaver theme and using the incredible photographs of Liam Wong, I’ve made this automated presentation for sites, suitable for portfolios and marketing. It combines some of the oldest principles of web development - progressive enhancement - with some of the newest: the Web Animation API.
