Nelson Parallax Scrolling Animation2017-11-10T15:24:13+00:00

Project Description

The Project

Create a parallax animation to showcase the Nelson Environmental Remediation’s unique thermal desorption process.

Nelson Environmental Remediation is a company that excels at what they do: cleaning contaminated soil. Despite their success and global presence, they sometimes run into potential clients that are unfamiliar with their unique process. To be honest, when they try to explain how their process works, ‘on site, ex situ, thermal desorption with a destructive removal efficiency of 99.99%’ doesn’t exactly roll off the tongue.

That’s where we came in. Working alongside a talented collaborator (Lianne Charlene Creative) we developed a scrolling animation that Nelson could use whenever they needed to demonstrate their process to a potential client. This would especially come in handy during trade shows, conference speaking engagements, and when communicated with clients that use English as a second language.

Nelson Parallax Scrolling Animation

“We use the process animation all the time at trade shows and conferences. It is better than a video because we can control the pace of the animation depending on the person we are talking to. When we are conducting business in Asia and Europe it helps to show how our process works without a lot of technical jargon being required.”

Garry Ogletree - Director, Business Development, Nelson Environmental Remediation

Communicating NELSON’s process in one linear animation

The animation uses over 200 moving parts and combines different triggers to activate SVG files according to various events.

Together with the Nelson team and Lianne we storyboarded the entire process and began to break it down into specific sections. It was imperative that the animation accurately reflected the real life process and a successful planning stage was critical in achieving success with the project.

The library used to perform the animations was GSAP (Green Sock Animation Project). We then used Scroll Magic to trigger the animation at different scroll events. The whole process was incredibly rewarding for us as we were able to learn a great deal about Scroll Magic, GSAP and the creation of complex parallax animations. Ultimately we even wrote a number of blog posts about tips we picked up using Scroll Magic! The last step in the process was to convert the animation into a WordPress plugin so that it could be embedded seamlessly into the Nelson Environmental Remediation website.

Screenshot of Nelson Environmental Remediation's scrolling animation of their process

Technologies

Green Sock
GSAP
HTML
HTML5
Javascript
JavaScript
CSS
CSS3
Scroll Magic
ScrollMagic
Adobe Illustrator
Adobe Illustrator
jquery
jQuery
PHP
PHP

Integrations

Wordpress
WordPress

Take a look.

Visit NERGLOBAL.COM