diff --git a/docs/assets/js/UI/ui.js b/docs/assets/js/UI/ui.js
index 4f05905..c15dcd9 100644
--- a/docs/assets/js/UI/ui.js
+++ b/docs/assets/js/UI/ui.js
@@ -2,9 +2,6 @@
 function drawTitleScreenUI() {
 }
 
-// UI for level transition
-function drawLevelTransitionUI() {
-}
 
 // UI for playing
 function drawPlayingUI() {
diff --git a/docs/assets/js/constants.js b/docs/assets/js/constants.js
index e3fd9cb..4f5d388 100644
--- a/docs/assets/js/constants.js
+++ b/docs/assets/js/constants.js
@@ -53,7 +53,9 @@ var constants = {
         hip: {
             offset_x: 15,
             offset_y: 25
-        }
+        },
+        defaultX: 500,
+        defaultY: -70
     }
 
 };
\ No newline at end of file
diff --git a/docs/assets/js/index.js b/docs/assets/js/index.js
index 7c59cf5..27ca176 100644
--- a/docs/assets/js/index.js
+++ b/docs/assets/js/index.js
@@ -61,13 +61,14 @@ function draw() {
 
     // Handle game state
     switch (globalState) {
+
         // title screen
         case globalStates.titleScreen:
             drawTitleScreen();
             break;
         // level transition
         case globalStates.levelTransition:
-
+            handleTransition();
             break;
         // playing
         case globalStates.playing:
diff --git a/docs/assets/js/player/player.js b/docs/assets/js/player/player.js
index a87c1fd..9c541a9 100644
--- a/docs/assets/js/player/player.js
+++ b/docs/assets/js/player/player.js
@@ -246,5 +246,5 @@ function distanceToLineSegment(lx1, ly1, lx2, ly2, px, py) {
 
 
 
-var player = new Player(500,-70);
+var player = new Player(constants.player.defaultX, constants.player.defaultY);
 
diff --git a/docs/assets/js/titleScreen/titleScreen.js b/docs/assets/js/titleScreen/titleScreen.js
index 3e8e08e..cbf91fc 100644
--- a/docs/assets/js/titleScreen/titleScreen.js
+++ b/docs/assets/js/titleScreen/titleScreen.js
@@ -24,7 +24,7 @@ function handleTitleScreen(){
 function handleMainScreen(){
     if(timer > 20){
         if(rectpoint({x:415, y:200, w: 300, h: 50}, {x:cursor.x, y:cursor.y}) && mouseDown[0]){
-            globalState = globalStates.playing;
+            globalState = globalStates.levelTransition;
             timer = 0;
         }
         if(rectpoint({x:415, y:550, w: 300, h: 50}, {x:cursor.x, y:cursor.y}) && mouseDown[0]){
diff --git a/docs/assets/js/transition/transition.js b/docs/assets/js/transition/transition.js
new file mode 100644
index 0000000..b1d566f
--- /dev/null
+++ b/docs/assets/js/transition/transition.js
@@ -0,0 +1,42 @@
+
+var currentAlpha = 1.01;
+
+
+function handleTransition(){
+
+    // Calculates alpha until its zero
+    if(currentAlpha > 0){
+        currentAlpha -= .005;
+    }
+
+
+}
+
+
+// UI for level transition
+function drawLevelTransitionUI() { 
+
+    // centers camera on player
+    centerCameraOn(constants.player.defaultX, constants.player.defaultY);
+
+    // sets alpha for background drawing
+    canvases.ctx.globalAlpha = 1;
+
+    // draws background sprites
+    drawWorldBlocks();
+    imgIgnoreCutoff(sprites.level_2,0,0,0,4,4);
+    player.draw();
+
+    // sets alpha to calculated alpha for black
+    canvases.ctx.globalAlpha = currentAlpha;
+
+    // draw a black rect unless less the 0 alpha then switches to actual game
+    if(currentAlpha > 0){
+        rect(0, 0, 2000, 2000, "black");
+    }else{
+        globalState = globalStates.playing;
+    }
+
+    // resets alpha for rest of drawing
+    canvases.ctx.globalAlpha = 1;
+}
diff --git a/docs/index.html b/docs/index.html
index cf18396..940cbaa 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -48,6 +48,7 @@
 
         <script src="assets/js/titleScreen/titleScreen.js"></script>
         <script src="assets/js/UI/ui.js"></script>
+        <script src="assets/js/transition/transition.js"></script>
 
         <!-- Webpage -->
         <script src="assets/js/injection/cssinjector.js"></script>