Our client came to us wanting to showcase how their teams came together to solve the toughest cases in healthcare. They didn’t want a basic webpage with just images and content, they wanted a smooth, interactive, immersive experience that took the user through the patient’s journey from beginning to end. There was only one way: bring the page to life using meaningful and expressive animations. But that was not all, it needed to be templated so that as new stories emerged, they could immediately be shared with the world.
Our Creative and Hive teams paired up to provide all the images, videos, and copy to be animated. We worked side-by-side during the entire process to interpret the client’s vision into code that generated these rich animations. The final vision included an intro, a patient overview, a treatment section, team member stories with video, the story outcome, and a slider that included other patient stories.
Combining GSAP, ScrollMagic and Sitecore XP
First, we created GSAP timelines. Each timeline served as a container to handle the timing of events. We controlled the position, duration, and delay of each element. For example, on page load, you see an image of the patient, and after a certain time, the intro content slowly animates in, with the title first, then the subtitle, and finally the team members. This all happens before the user interacts with the page.
These pages are long, so we needed a way to reveal the remaining content when the user scrolled to it. This is where ScrollMagic came into play. As the user continued down the page and through the patient story, more animations were initiated.
Every animated element in a patient story is tied to a Sitecore field in a template. We engineered the template to handle unique content for each individual patient and share the same animation engine. This engine was responsible for generating content based on the user’s browser, viewport, and device. Not an easy feat by any means. This meant we had to create multiple fields for a single piece of content. For example, the WebM videos could play on Chrome & Firefox desktop, and Android, but not on IE 11 or an iPhone. To solve this, we created a field for the WebM video and backup transparent images that overlayed and animated to imitate the video.
Our client was still on IE11 at the time of this project. I know, it was painful! Mostly because IE11 had a poor GPU hardware acceleration. Our animations “worked,” but they looked choppy and slow, not at all what the client wanted which was a smooth, interactive, and immersive experience. If we had known about the poor rendering quality, we would have presented our client a different plan for IE users.
Trackpad vs Mouse vs Direct Scrollbar Interaction
During development, we discovered the scrolled-to animations appeared differently with a trackpad, a mouse, or direct scrollbar interaction. The trackpad was smooth but slightly delayed. The mouse was choppy due to the construction of the click wheel. The smoothest animations happened when grabbing and dragging the scrollbar. The problem was no one really drags the scrollbar when scrolling a page. To fix this, we adjusted the animations by increasing duration and adding a longer delay so that no matter the hardware the user was on, the experience would be as smooth as possible. It wasn’t perfect, but it was better.
Documentation for the Content Author
We had to make it easy for the content author to create new stories or edit existing ones on their own. They already had a working knowledge of the Content Editor and Media Library, so we wrote the documentation with that assumption in mind. Even with 25 pages of thorough documentation, including two dozen labeled screenshots, the content author still needed a little more help. The problem was the large quantity of page content; it was difficult for the content author to digest the 50 videos and image assets for each story.
The answer was to create a spreadsheet with the device type, page location, Sitecore field label, file type, size, file name, and any notes. This was the key to organizing all the patient’s content.
Make sure a list of devices and browsers are established before the project kicks off, or at least before development begins. Setting expectations with the client early is always a good idea, especially when their preferred browser is nearing end of life.
With the plethora of devices that are on the market today, do additional research on possible hardware limitations or quirks. Let the client know that the site will perform differently from one device to the next.
And finally, keep the content author in the forefront of your mind when developing. Bonus points if you have a plan on naming conventions for Sitecore labels and how the documentation will be structured and presented to the client.