Why Funkhaus Designers Use Lottie To Create Animations
Though Lottie animations have been in play for a few years, we’re still marveling at how this format has allowed our design team to take back control over animation designs, freed up time for programming, and simplified communication between teams. Here’s how our design team uses Lottie animations in their work, including a fun recent web design project for creative agency Someplace.
With Flash animations in the rearview, using the SVG format for animations was the standard for years — though unlike flash, these required additional coding to publish, and designers and developers had to work closely together to execute animations. As you can imagine, this took a lot of time and communication to pull off. In the last few years, the Lottie format has emerged as a contender in the space, offering streamlined workflow and nimble execution.
With the Lottie code base, we can create an animation using a design tool like Figma, export it out as a JSON file, and simply hand it over to our dev team. With these files in hand, programmers are able to place our designs directly into site layouts, saving us a lot of time and energy. Designers can store and share access to files with the programming team to download as needed on the Lottie online web app repository, whose GUI interface allows both designers and programmers to both easily visualize the elements and quickly find what they need. “What Lottie allows us to do is take our power back as designers — we have control of the animation and are able to take excess work off of the programmers’ plates, while making our communication more efficient,” says Funkhaus Design Head David Funkhouser. “The sheer connectivity of it all is huge for us.”
Our site for Someplace, a cutting-edge creative agency based in Los Angeles, is the perfect example of some of the fun effects we’ve been able to achieve with Lottie. In recent years, the creatives behind Someplace observed a looming darkness growing in the industry and wanted to combat that with a wave of color, vibrancy, and excitement — through their work and their web presence. They came to Funkhaus wanting to collaborate on a site with a standout landing page that welcomes the user into their unique world.
Lottie animations came in clutch for Funkhaus designers when it came to creating an eye-catching animation for their homepage: a psychedelic island-scape consisting of one core graphic accentuated by a number of smaller animations. The island, which Designer Marlon created in AfterEffects, animates on scroll, triggering balls bouncing, little monsters appearing and disappearing, and clouds hovering — each individual animations playing on their own timelines. Something like this used to have to be a video file, which is much heavier and more taxing on a browser. With Lottie, this large scale design is much lighter and more efficient.
Not only are we able to more easily create and deliver an animation, Lottie also affords us greater ease in making adjustments after entering the programming stage. Say the client wanted to alter the speed at which an alien appears — all we would have to do is speed up the timeline of that individual After Effects file, export the new JSON, and send it to programming. This way, we can edit any individual animation without having to change the larger animation. “The ability to continually make micro edits on the fly gives us greater control over the animation overall,” explains David. “That's the power of Lottie just in a nutshell: the control it gives back to the design team is incredible.”