Web Animation and Transitions

Long exposure photograph with streaks of light left by vehicles outside of the Printworks in Manchester

Animation is a great tool for adding interactivity, providing narrative and generally making a web page more enjoyable to use.

In this article I discuss the techniques used to animate a simple statistics page to help tell the story of the data as well as add some simple interactivity and the challenges I encountered doing so.

Aim

To use current and relevant animation techniques to add interactivity to a demonstator page.

Objectives

  • – Use CSS3 transitions and animations to add interactivity
  • – Manipulate page elements to create unexpected interactions
  • – Produce an interactive and enjoyable demonstrator
  • – Apply animation theory through the demonstrator

Take a look at the demo.

Approach

When I started this project, I said foolishly I was going to do it as ‘a bit of fun’, a vacuous statement which showed my lack of understanding of the complexities of animation. Initially I played around with animations which would have looked more at home as a Windows 98 screen saver with water ripples triggered by a mouse-over.

I soon realised how ridiculous this was and started looking into other techniques I could play with. The next experiment being a slowly rotating planet Earth. I was pleasantly surprised by the result of this, but I had fallen into the trap of putting style over substance, designing fancy animations without considering what my content would be.

Another advantage of putting all the grid styles within a supports rule is the ease in testing your fall-back solutions. You can quickly comment out the whole rule to see your design reset to flex-box.

At this point I stopped myself and began deciding on a concept. I chose to create a page providing information about water using various infographics which would animate as the user navigates the page. The challenge here was triggering the animations when they were scrolled into the visible portion of the viewport. After several attempts the animations would keep triggering as soon as the page had been scrolled down a single pixel, or the class-swapper would trigger the change on the page loading. Whilst these were most likely a problem with my code, I was struggling to find the exact cause as the animations would trigger correctly when viewed offline, just not live.

After a few days spent with my head against the wall I decided in a final attempt to try and trigger my animations using the AOS library which I use on my portfolio. On inspection it appeared the AOS library simply triggers its own animations by adding a new class the element. Knowing this I could use this class to trigger my own animations. AOS also provides some pleasant and easy to use animations for content entering the screen. I used Michal Sajnog’s guide on CSS-Tricks to learn how to implement AOS within the page.

Having created this interactive page, I regret not having used a demonstrator with more buttons and interactive elements as these seem like the most essential elements to animate. Subtle animations on UI elements can give content better flow and give users a better understanding of the effect their interactions have as seen in Pablo Stanley’s article ‘Good to great UI animation tips’. I did however implement some simple interactive animations on the down arrow at the top of the page which makes the window scroll down when clicked. The arrow bounces to show the user that there is content below and that if they click the arrow they can expect the page to react. In addition, when hovered over the arrow gets larger, implying that this is something you can click.

Conclusion

Overall the animations used on the page help to guide the user through the information presented and make the page more aesthetically pleasing and fun to use. Whilst I would have preferred to use more clickable interactive elements I did gain a lot of knowledge working on this project, learning how to use SASS and manipulate SVG using code.


Reading List


Take a look at the demo.

Contact

Have a project in mind? Feel free to get in touch using the contact form and I'll be happy to help. Alternatively, you can email me directly at cprincewebdev@gmail.com.

profile for C Prince at Stack Overflow, Q&A for professional and enthusiast programmers

Get in touch