JSFiddle - React, Tailwind, and code Playground

by piotr_cz

HTML

<div id="wrapper">
    <div class="content"> content 1 </div>
    <div class="content" style="margin-right: -100%"> content 2 </div>
</div>

<input id="go" type="button" value="go" />

CSS

#wrapper {
    width: 100px;
    height: 100px;
    position: relative;
    overflow: hidden;
    border: 1px solid #f88;
}

.content {
    position: absolute;
    width: 100%; height: 100%;
    border: 1px solid #888;
    background: #ccc;
    top: 0; right: 0;
}

JavaScript

var
  $el1 = document.getElements('.content')[0],
  $el2 = document.getElements('.content')[1],
  TweenOptions = {
      duration: 2000,
      property: "margin-right",
      unit: "%"
  };
/*
$el1.set('tween', TweenOptions);
$el2.set('tween', TweenOptions);

// setting events for $el2;
$el2.set('tween', {
    onStart: function(ev) { console.log('fired onStart'); },
    onComplete: function(ev) { console.log('fired onComplete'); }
});
*/

document.id('go').addEvent('click', function(ev) {
    $el1.set('tween', TweenOptions);
$el2.set('tween', TweenOptions);

// setting events for $el2;
$el2.set('tween', {
    onStart: function(ev) { console.log('fired onStart'); },
    onComplete: function(ev) { console.log('fired onComplete'); }
});
    
    $el1.tween(0, 100);
    $el2.tween(-100, 0);
});