import { ComponentFactory } from '../../dist/outkit';

var ok = new ComponentFactory();

var el = {};
el.drawer = document.createElement('div');
el.drawer.id = 'drawer';
el.drawer.style.backgroundColor = '#ddd';

el.overlay = document.createElement('div');
el.overlay.id = 'overlay';

var windowHeight = window.innerHeight;
document.body.style.height = windowHeight + "px";
document.body.style.margin = 0;
document.body.style.padding = 0;

document.body.appendChild(el.overlay);
document.body.appendChild(el.drawer);


var comp = {};
comp.overlay = ok.overlay('#overlay');
comp.drawer = ok.drawer('#drawer', {overlay: comp.overlay});

comp.drawer.open();

setTimeout(function() {
    comp.overlay.off();
}, 3000);
@@ -46,16 +46,86 @@
 outkit';
+%0Aimport %7B OutkitAnimator, AnimatorTransition %7D from 'outkit-animator';
 %0A%0Avar ok
@@ -673,20 +673,32 @@
 wer'
-, %7Boverlay: 
+);%0Acomp.drawer.addChild(
 comp
@@ -705,17 +705,16 @@
 .overlay
-%7D
 );%0A%0Acomp
@@ -725,13 +725,18 @@
 wer.
-open(
+relay('on'
 );%0A%0A
@@ -772,20 +772,26 @@
 omp.
-overlay.off(
+drawer.relay('off'
 );%0A%7D
@@ -798,8 +798,265 @@
 , 3000);
+%0A%0Aconst animator = new OutkitAnimator();%0Aanimator%0A    .setDuration(500)%0A    .setTransition(AnimatorTransition.EaseOut)%0A    .setRate(16)%0A    .setStep((x, y, z) =%3E %7B%0A        console.log(x, y%5B0%5D, y%5B1%5D);%0A    %7D)%0A%0A%0Aanimator.animate(Date.now, 'Hello World!', 123);

remove animator and replace with OutkitAnimator