Motion
The motion language of Van der Plas consists of a simple set of movements that enhance each of the brand assets. Motion provides the brand with a feeling of energy and dynamism.
Easing
The easing is what defines the character of the motion. We define the easing for elements animating in and out of the frame. The easing is applied to all brand assets to create one consistent motion style.
Values CSS
- Slow to fast: cubic-bezier(0.4,0,0,1)
- Slow to fast: cubic-bezier(0.4,0,0,1)
- Fast to slow: cubic-bezier(1,0,0.6,1)
- Slow to fast, and slow again: cubic-bezier(0.65,0,0.35,1)
Logo animation
Logo animation without wordmark
There are two variants of the logo animation, with and without the word mark underneath.
On the page, you can find a download link to an After Effects template that has the full-color palette within.
Logo animation with wordmark
Reveal and close
The motion system has the possibility to reveal and close content & typography.
Additional logo usage
The logo animation could potentially be used for a loading screen icon.
Motion system in layout
Separate logo movement
All the movement of the separate logo should be on the grid system explained in the previous chapter.
Complete logo movement
If the logo moves across a composition it should move along the grid. This means it can only move horizontally and vertically
