Solenergy Systems, Inc. provides viable and sustainable power alternative by building dependable, affordable, and world-class solar-powered systems.
The CEO of Solenergy had specific requirements about the design and user interaction of the company website. He requested for a one-page layout with animated elements. The goal was to create a website that looks different from the usual corporate websites of their competitors.
Above: Click the video to view the animations.
I used a combination of javascript (GSAP), css and svg to animate parts of the svg icons and for the icons radiate from the center when scrolled into view. It's my way of representing the sun and bursts of energy emanating from it. All information are contained in the front page. The extra details about the company and its projects are initially hidden from view and only appear via sliding containers when relevant links are clicked.
To enable the company's marketing team to update the website content, I built the site with WordPress and a custom child theme of Woothemes Canvas. Although it is highly unlikely that they will need to edit the animated elements of the site, I nevertheless did the extra step of building custom fields for replacing the svg icons and their labels and editing the javascript codes that move the icons.
I also built the site to be responsive for optimal viewing in mobile devices.
NOTE: The client has added additional inner pages to the site but the the long scroll homepage is essentially the same as when we launched it.
Back to Top