This web-based training uses striking comic book graphics and eye-catching animations to teach readers about conflict resolution with their customers.
The user reads a story about a scheduling conflict, and is asked to type in a response detailing how they would handle the problem. Then the user is presented with tips on conflict resolution, and submits an updated answer using what they've learned.
NOTE The demo does not store or submit any data. It is optimized for viewing on an iPad screen or larger.
Side Scrolling Animation
This course uses Greensock's Scrolltrigger plugin to fire animations for each panel as the user scrolls down the page.
A different effect is used for this section. The course appears to stop scrolling vertically and shows this panel move horizontally.
This was achieved using Scrolltrigger's "pin" functionality.
- For the duration of the effect, the entire main wrapper gets pinned so it can't move.
- Instead, as the user scrolls it plays an alternate animation sequence which shows the panel scrolling sideways.
- At the end of the effect, the main wrapper un-pins and the course continues vertical scrolling like normal.