Kontakt Scripting (KSP) :: UI :: Drawer or Offcanvas with slide in/out animation [Kontakt 6+]
This article explains how to make a vertical drawer with a slide in/out animation with Kontakt 6 (and beyond). (see video)
The download additionally includes a horizontal drawer with a slide right-in/right-out animation. You can customize both the drawer to your needs via some global adjustments
Please accept YouTube cookies to play this video. By accepting you will be accessing content from YouTube, a service provided by an external third party.
If you accept this notice, your choice will be saved and the page will refresh.
Drawer With slide Animation For Kontakt 6+:
- nki files with open script tab
- and open Resource folder
- vertical and horizontal drawer
- all KSP script files
- no Sublime Text required
License:
MIT International License.
https://blog.yummybeats.com/license-text-mit/
You may use this script, modify it, build upon it, as you like (also commercially), as long as you keep all credits within the code visible to others. You may put them into an extra open script tab or inside an about section of your instrument. If you would like to remove the credits or publish them somewhere else, please contact us
YOU MAY NOT commercialize, share, distribute, whatsoever the included image files and other media (©2026 all rights reserved).
CONTENT
-
first glance
-
installation
-
global adjustments
-
Full code (Vertical drawer)
-
ON INIT: setting the width & height of the ui
-
ON INIT: defining the drawer’s open & close Positions
-
ON INIT: global helper variables
-
ON init: creating the drawer & Components
-
Functions: Drawer Slide Animation
-
On ui_control: The Drag Button
-
Example: Drawer with UI Elements
first glance
Drawer or Offcanvas can be used to hide content outside a main canvas (the visible part of the UI).
Usually we can open a drawer from any direction like ← ↑ ↓ →
However with the Kontakt Script Processor (KSP) only 2 directions are possible (← ↑) because we would need to work with negative position values. And negative values are not allowed (yet?!).
Installation OF THIS SCRIPT
1. simply copy the content inside the on init callback from this script into your on init callback above your code like so:
on init
{<THIS ON_INIT>}
{<YOUR CODE>}
end on
Don’t copy the on init .. end on
WRONG (this will produce an error):
{WRONG - this will produce an error}
on init
on init
{<THIS ON_INIT>}
end on
{<YOUR CODE>}
end on
2. copy anything else (on note callbacks, on ui_control callbacks, functions, macros etc) below your on init like so:
on init
{<YOUR CODE>}
{<THIS CODE>}
end on
{<ALL THE REST OF THIS SCRIPT AS IS, like callbacks, functions, macros etc >}
{<YOUR CODE like callbacks, functions, macros etc>}
GLOBAL Adjustments
in the beginning of the script you can do some adjustments
{ADJUST THE DESIGN & BEHAVIOR OF THE DRAWER}
declare const $UI_WIDTH := 800 {sets the total UI width in pixels: min width = 632; max width = 1000}
declare const $UI_HEIGHT := 450 {sets the total UI height in pixels: min height = 50; max height = 750}
declare const $DRAWER := 1 {sets the amount of used drawer. Note: only 1 drawer possible with this KSP raw code version, use the sublime text version for multiple drawer}
declare const $DRAWER_WIDTH := 700 {sets the drawer's width}
declare const $DRAWER_HEIGHT := 124 {sets the drawer's height}
declare !canvas_drawer[$DRAWER]
!canvas_drawer[0] := "canvas_drawer1" {sets the background image for the 1st drawer}
declare $ANIMATION_TIME := 200 {in ms}
declare $drawer_alignment := 1 {left = 0; center = 1; right = 2}
declare $drawer_pos := 0 {x-position in pixels based on the alignment setting}
declare const $DRAWER_PROTRUDING := 32 {sets the distance in pixels how far the drawer should protrude into the main canvas}
declare @drag_button_picture
@drag_button_picture := "btn_drag-horizontal" {set the picture for the drag button}
declare const $DRAG_BUTTON_WIDTH declare @drag_button_picture:= 32 {set the width of the drag button (it has to equal the picture's width)}
declare const $DRAG_BUTTON_HEIGHT := 16 {set the height of the drag button (it has to equal the picture's height)}
declare const $DRAG_BUTTON_POS_X := 0 {position the drag button on the x-axis in pixels, from the center point}
declare const $DRAG_BUTTON_POS_Y := 4 {position the drag button on the y-axis in pixels}
simply read the comments next to the variables or watch the video
$drawer_pos
moves the drawer across the x-axis based on the alignment settings.
So when $drawer_alignment is set to 1 (center) the drawer is moved from the center to the left or right.
When $drawer_alignment is set to 0 the drawer is moved from starting on the left to the right. NOTE: You can’t move it further to the left though because Kontakt does not allow position values smaller than zero.
$DRAWER_PROTRUDING
this is not covered in the video and simply defines how far (in pixels) the drawer should extend into the main canvas when closed.
@drag_button_picture
$DRAG_BUTTON_WIDTH
$DRAG_BUTTON_HEIGHT
$DRAG_BUTTON_POS_X
$DRAG_BUTTON_POS_Y
all these adjustments are also not covered in the video and define the styling of the drag button. Just refer to the comments nearby.
If you want to learn more about creating custom buttons read the buttons tutorial
FULL CODE
Below you can see the full script.
premium content
Serge GORA
Hello _
Do you think it is possible to do this from above, from the Kontakt Header?
YummyBeats
(in reply to Serge GORA)
Hey, I wish it did. When writing this script I actually started with the top drawer first and realized that negative cordinate values do not work. But maybe NI has updated Kontakt since then?!
Or maybe you can find a workaround?! If so let me know. That would be great actually!