Client: Trailstone Group
Project type: Website
Trailstone is a global energy and technology company, operating at the intersection of renewable and conventional power.
At the core, Trailstone have created a platform to trade physical and financial energy products across North America and Europe whilst also developing management services for renewable energy.
As a rapidly growing company there was a requirement to elevate their outwardly facing appearance as a brand that would appeal to investors and businesses alike.
Working alongside Creature London we developed a website to not only showcase the new brand work, but to lay down the intricate details of the business in a striking, fresh and clear way.
The Trailstone branding developed by Creature involved the use of dynamic electron lines. Our challenge was to work out how to represent their motion in a web framework.
Gradients and more specifically gradients inside lines are not something the the web likes very much.
We therefore developed a technique and workflow that integrated lottie.js. Lottie.js allowed us to Render After Effects animations natively on Web, giving us the animation control we wanted at the performance and speed that we needed.
We experimented with a few approaches but hit upon combining the benefit of lottie's vector animation that mask bitmap gradients. This meant we could present scalable and crisp visuals in a tiny data load.
Lottie then allowed us to both present dynamic moving lines as background texture as well as animations driven by the users scroll.