Best Day Toys

For a long period of time the design team I work with wanted to introduce a couple of different vendors to a project called Lottie and Lordicon. Essentially, Lordicon is an online library of animation ready icons that can be exported and used in a variety of different ways. In fact this website is using some Lordicon assets as well on the home page! Lottie on the other hand is used to power very complex animation and display it on a webpage at minimal cost to the user.

Not to go too far off on a tangent, but Lottie is really incredible. It makes it so that a designer can create a desired animation in After Effects and then export it to be ready to use for the web. In the past we may have had to use a video or even a .gif file to achieve the same effect. Lordicon on the other hand is also super useful in this context because one of the export options is meant to be used by the Lottie library in order to control the animation. Going this route you’ll be provided a JSON file that can be then used as source for the Lottie web player.

All of this aside it took a little bit of time in order for us to get these two vendors added into one of our builds. Budget and time constraints are always a factor, but we also needed a project that was somewhat playful enough to achieve what the designers wanted to go for. Enter Best Day Toys, an online toy company that had the exact tone we were looking for.

What we settled on was a stepped animation, over several elements, that would play in sequence, staggered, one after the other. You can see what I mean by checking out the ‘Best Values’ section on this page. 

How it works is that there’s a selection on the WordPress admin where you can choose your icon. This adds the icon, represented as a string, as a data attribute to the surrounding <div> element that matches up to a JSON asset we have in the library. I then use jQuery in this case to parse and concatenate together the final path to the asset. Once I have that I can pass the path into the loadAnimation method of the lottie object.

That handles how to render and get the icons to play using Lottie, but not how to do it when they’re visible to the user or in the staggered sequence. For items in view a very lightweight jQuery plugin is used and then to finish I use the setTimeout function on each item iterated through that plays the animation when triggered. That is multiplied by the next index and passed into the timeout which then fires at different intervals creating the staggered effect.

Using this project as a way to test out and implement these new tools was a very fun experience. Since then we’ve been able to more easily integrate the two vendors into other builds with other use cases. For example some that come to mind are using the icons to play on hover or click instead of once they are in view.

On this website I’ve been able to integrate them with GSAP as well so that they’ll play according to a timeline at a certain position. I hope you enjoy it and see some of the possibilities there are with these libraries!