Use cases
Dynamically display the differences between two sides - This can be different products, characters or other aspects
Let the user decide between two sides (for example in a movie story)
Example
This is a really simple case of using the slidebar. Another common case is having a different endcard triggered by opening one of the sides or adding parallax effect to make it look more dynamic with the users interaction.
As with all examples, you can request us to copy them over to your company so you can look at how they are built in detail.
Slide direction
You can choose between horizontal (default) or vertical mode on the right side by clicking the icons.
Initial start position
With this slider, you can set where the line that divides the two slides starts
Open trigger percentages
With these fields you can define a percentage point at which a side will count as opened and thus, trigger the side-opened-event (Which is used to change the scene or play an animation in most cases).
Initial slide animation
While this is active, an initial animation will play when the Slidebar module is shown - Indicating that the slider can be moved / interacted with by the user.
Parallax effect
Enable this setting to allow the parallax effects (which you can set for the Slidebar contents in their respective "Module" tab) to render in the resulting creative. Parallax effects will make the content seem more dynamic and the Slidebar module allows for movement, as well as multi-dimensional rotations of parallax contents.
Gradual darkening effect
Enabling this setting will cause the opposite side from the one that is being opened to gradually become darker as it gets smaller. You can adjust the strength of this setting with a slider that appears below once it's activated.
Timeout
You can set up a module timeout for the Slidebar. When the timeout runs out - A timeout event will be triggered, which you can utilize from the interactions tab.
Initial arrows animation
This toggle plays an initial animation for the slidebar thumb arrows, if you use the default thumb (not a custom image you uploaded yourself). The arrows will go outwards and inwards to indicate the possibility to move/interact.
Arrow/Thumb Settings
With these settings, you can change the position of the arrows/thumb on the slidebar itself, as well as the size and color.
You can also seperately change the color of the underlying circle that makes up the slidebar thumb, together with the arrows.
You can also upload a custom asset to replace the whole thumb (arrows + circle) on the slidebar.
Line settings
With the color picker, you can select the color of the line that divides the 2 slides. With the field below, you can change its' thickness in px.
Properties & Clickout
As for the Background module, the Slidebar module allows you to change different properties like the opacity seperately in the "Properties" tab.
Also, you can set up a clickout link for the Slidebar module as usual.
Interactions
The Slidebar offers all standard triggers & actions that the Background module offers as well. Furthermore, the Slidebar module offers:
Triggers
First interaction = Triggers when a user first interacts with the module - this can also be a simple tap
Left side open = Triggers when the trigger percentage to open the left side has been reached
Right side open = Triggers when the trigger percentage to open the right side has been reached
Moved toward the left = Triggers when the slider thumb has been moved in the left direction by the user
Moved toward the right = Triggers when the slider thumb has been moved in the right direction by the user
Timeout = Triggers when the module timeout limit has been reached
Actions for other modules
The video module offers several actions that other modules can trigger via an interaction:
Open slidebar side left = Opens the left side of the slidebar module manually
Open slidebar side right = Opens the rights ide of the slidebar module manually