Creating Immersive Front-End Sitecore XP Experiences with GreenSock and ScrollMagic

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 Process

After extensive research, we chose to combine the power of Sitecore XP with two rich JavaScript animation libraries: GreenSock Animation Platform (GSAP) and ScrollMagic. GSAP and ScrollMagic together can create animations that are smooth, lightweight, interactive, and most importantly, work across different browsers and devices. Not only did these stories have to look beautiful on a desktop, they also had to captivate the user on a mobile device.

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

GSAP

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.

Animation showcasing page loading transitions.

ScrollMagic

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.

Animation showcasing Greensock scrolling transitions.

Sitecore XP

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.

Sitecore admin interface for adding animation assets.

Learnings

Internet Explorer

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.

Key Takeaways

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.

Related Ideas, Info and Stuff You’ve Gotta Read

Creating an Interactive Regional Map with Mapbox and Sitecore

Creating an Interactive Regional Map with Mapbox and Sitecore

Discover how we created an elegant and user-friendly way to display regional statistics combining both Sitecore and Mapbox.
Charting a Path to Sitecore with Highcharts

Charting a Path to Sitecore with Highcharts

Read how we showcased 1,000+ charts of medical data into a navigable, memorable user experience.
Migrating Sitecore Indexes from Lucene to Solr

Migrating Sitecore Indexes from Lucene to Solr

When we were upgrading our Sitecore 8 project to Sitecore 9, we needed to come up with a new solution for indexing the data. Our Sitecore 8 project was using Lucene for indexing which posed two problems: Lucene was not supported in our Sitecore 8 environment configuration, and Lucene was not supported in Sitecore 9.
Improving User Experience with React and Sitecore

Improving User Experience with React and Sitecore

As a health-care organization that provides quality care to many current and prospective patients, the ability to easily navigate thousands of physicians to find one that is “just right” is critical.
Paul Brienza
Paul Brienza
Chief Growth Officer
(414) 270-7175
paul.brienza@laughlin.com

Let’s Talk

    Be in the know, now!

    Receive a monthly dose of big thinks. Don’t worry, you can unsubscribe at anytime. Privacy Policy