premium article

Last modifiedby & filed under Kontakt Scripting (KSP) - Basics, UIs, Tutorials, Scripts and Tools, Kontakt Scripting (KSP) :: Custom Scripts & Functions (Plugins), Kontakt Scripting (KSP) :: UI (Design) & Engine.

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.

YouTube privacy policy

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


MIT International License.
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 (©2024 all rights reserved).


first glance

Kontakt Scripting (KSP): Vertical Offcanvas/Drawer Kontakt Scripting (KSP): Horizontal Offcanvas/Drawer

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

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

    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

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.

this is not covered in the video and simply defines how far (in pixels) the drawer should extend into the main canvas when closed.






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


Below you can see the full script.

premium content

How useful was this article?

something you didn't like? Please tell us before you rate!

Average rating / 5. Vote count:

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

NOTE: highly negative votes may be removed without any reasonable given feedback!

Tell us how we can improve this post?

2 Responses to “Kontakt Scripting (KSP) :: UI :: Drawer or Offcanvas with slide in/out animation [Kontakt 6+]”

    • YummyBeats

      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!

Leave a Reply

use <pre> </pre> to wrap code blocks

use <code> </code> to wrap small code snippets

use basic html to style your comment

Your email address will not be published. Required fields are marked *