• Andy Somers

  • Software Engineer

Awesome Logo of Foreach Animation

Our final Ship It Days project is ALFA, or the Awesome Logo of Foreach Animation. It had the same requirements as the other projects, of course: don’t work on it alone, take about two days to complete and benefit the company in some way. While that didn’t work out completely as planned, we did learn a lot and got really close to where we wanted to be.

Initial Idea

We've had a booth at quite a few conferences now, usually with at least one TV screen running a presentation, whipped up in Powerpoint (<gasp>!). Our initial idea was to create an animated logo using Javascript that we could use in these kinds of presentations. But why stop there? In order to create something truly shippable (and reusable) we decided to re-make the presentation that we ran at Devoxx 2017 with some snazzy animations and seamless transitions. A side-goal was to create it in such a way that it was easily adaptable and thus reusable for other presentations.

What We Ended Up With

The final result is a product that is 90% finished, therefore falling short of the goal of having something shippable. The entire project just had a couple of bugs too many, unfortunately, but that's always a risk when taking on a task like this. We did make an entire animated logo, a dynamic background in the Foreach house style and an animated high-score table. Stitching those together, however, proved to be just a step too far.

How We Did It

Based on a talk we saw at Fronteers 2017 by Val Head, we chose to go with the animation framework Anime.js, because it promised a shallow learning curve, the ability to plot out animations on a timeline and a lot of examples.

We split our team in half: two of us would animate the background and presentation pages, the other two would animate the Foreach logo.

Lessons Learned

Splitting up the team wasn’t the best choice. By implementing a framework that no-one really knew, we encountered the same issues and tried to solve them in parallel, but didn’t learn from the other’s experiences. Communication is key! Anime.js is excellent for stand-alone animations. However, combining several timelines together is not quite easy, especially if you only try to do this at the last possible minute. We had to improvise with some vanilla JS, which actually caused some of the bugs. The goal of making it configurable and reusable was thrown out quite quickly. Focussing on realistic goals and adapting our planning early on was a lesson we learned the hard way.

Future

As a first step, we’d like to get rid of the couple bugs that still plague our animation. Once that’s done, we’d love to use this in ‘production’ at our next event, but that will still require some development to make the content customizable. Once we iron out these kinks, though, we’ll no doubt have one of the prettiest presentations in all of the booths!

Conclusion

“Failure is always an option”, as Adam Savage puts it. And while we can’t say we’re entirely happy with the outcome, we did learn a lot about how to work with Anime.js, as well as how (not) to structure a project as a team. So, a failure, but also a learning opportunity. And that’s not bad for a Ship It Days project.

Oh, and of course, here's a snippet of the animation: 

 

Check out the other Ship It Days projects: the WAY person locator and the Smart Mirror v2.