This web-based training course combines colorful imagery and animation effects to create a memorable experience.
The course educates users on the benefits of our client's technology. It is built to work on all screen sizes, and also translates into 20+ languages.
NOTE Some course content has been modifed. Translations are not available in the demo.
Animation
The primary animation effect starts with a desaturated image. Shapes are moved around the screen to reveal bright splashes of color.
This effect is achieved with SVG clip paths. Every screen using this effect has several elements:
- Desaturated version of the background image
- SVG which contains a color version of the background image
- This colored image is connected to 2 clip paths in the SVG
- The shape of the clip paths is animated with Greensock
The laptop images have the same setup to achieve the part color/part desaturated appearance, though the effect is only obvious on a couple screens.
Research
I investigated a few different techniques to create this animation effect. I needed the right combination of technology to create a high quality effect, but still be performant on both desktop and mobile devices.
- SVG masks would have worked similar to SVG clip paths, with an added benefit of being able to make more interesting shapes. For example, instead of a hard edge between the desaturated and colored areas, they could have blended into each other. However, this created a huge performance hit on mobile.
- CSS clip paths were another possibility, but aren't as easy to animate with Greensock. They also don't work on IE11, which I was required to support.
Responsiveness
This project maintains a 16:9 aspect ratio in landscape orientation on all devices and screens. This allows me to create high quality animations and effects for all screen sizes, and not worry about converting the course to a portrait orientation layout. Users on mobile devices should rotate their phone for the best experience.