I’m working on a large, historical project where I needed a bit of a micro illustration that delights and can also shrink and swell on different screens.
This responsive application, (available on a variety of devices), is being developed with the Bootstrap Open Source Toolkit, along with the Ruby on Rails platform as an MVC, consuming JSON web services from another proprietary application to display all information.
Thousands of historical records can be kept in the proprietary application and delivered to this one. This is helpful in a vast display of history. While this is nice, I only wanted to use minimal data to display a set of about about 12 important eras or milestones in time. This made the front-end design & development work needing to be very impactful to keep users’ attention through an experience that wouldn’t be as boring like that of scrolling through a list in a table. Associated imagery was also available from the web service, which were required to display adjacent to milestones.
NOTE: While this experiment doesn’t have many breakpoints coded yet, (how certain devices will display imagery), see full the pen to get a feel for larger imagery along with captions that appear on larger screens. Desktop screens currently show animation.
See the Pen A responsive “hisorical timeline” using Bootstrap, Greensock & ScrollMagic by Dick Kirkland (@dickkirkland) on CodePen.
While I embellished an original example I found from mylastof, I am thankful to have stumbled on this elegant use of CSS border styles within Bootstrap columns to create a fluid set of intertwining wrappers that harnessed and wrap around dynamic content. Also many thanks to a super back-end deveolper and co-worker, Danny Musco, for refactoring code in what looks like an illustration into a system of dynamic, reusable set of parts that can be expanded for as long or short as the timeline needed to be for display of important eras of time.
Please see the embedded Codepen above, or visit it in full to peruse how things like the .jS and carousel components are integrated. There’s a lot already going on with this specific page so there are no tweens or additional animation integrated for now. Please see the developer section below for links on different libraries/plugins and the APIs to get them to move and shake.
Technologies Used for the App & Pen (stuff developers will probably only read)
Yeah, Bootstrap (and its column grid)
In looking at the code with the browser console/inspector, you can see that the “illustration” that wraps everything into a tidy flow is actually a series of flexible rows and columns with strategic border CSS magic.
My co-worker took this to the next level by depicting conditional rows depending on whether the segments were odd or even. He did this refactoring through the use of Rails’ _partials feature. The same could be done with php includes I would imagine. Either way you can see how the “snake” or segment can be limitless or not depending on your needs.
ScrollMagic!
There is a very dynamic plugin that makes the scrolling effects seen on this page and pen occur. While there is a very subtle use of the plugin here, ScrollMagic has many, many options in its params/API for tweens and easing. You can even “pin” elements for a certain duration or make them “sticky” in the browser window. See more examples ranging from beginner to advanced. Extensive documentation is available.
GreenSock!
GreeenSock is “Professional-grade javascript animation for the modern web” and has many plugins that can work in tandem with ScrollMagic above. These are cited in the ScrollMagic documentation. You can animate just about anything with GreenSock, but the fact that it can work along with ScrollMagic makes it even more special. There are many Greensock Plugins available and are cited in the ScrollMagic docs as helpers or dependencies.
I hate tomatoes! (Petr Tichy)
While all of the above are very helpful technologies, I had trouble at first understanding certain uses of the ScrollMagic API. While Mr. Tichy seems to be an expert at ScrollMagic, he has other great content for front-end developers. He produces both free and paid classes. Make sure to catch the “ScrollMagic 101” playlist to get up to speed quickly, the correct way when using all of this great technology.
Sure, this was a very long-winded explanation filled with things you may or may not need. Approaching the UI/UX of a project to make it less boring of a web experience is something I’m passionate about though. I consider the experiment drawn originally on a whiteboard and then in Sketch™, later coded to its fullest a success. Maybe you can use it and/or these resources too.
