JSFiddle - React, Tailwind, and code Playground

by amindunited

HTML

<div class="page current">
    <h1>Page 01</h1>
</div>
<div class="page next">
    <h1>Page 02</h1>
</div>
<div class="page">
    <h1>Page 03</h1>
</div>
<div class="page">
    <h1>Page 04</h1>
</div>

<script type="text/x-handlebars" data-template-name="application">
    <h1>Application</h1>
    <div>{{#link-to "about"}}About{{/link-to}}</div>
    <div>{{#link-to "favorites"}}Favs{{/link-to}}</div>
  <div>
    {{outlet}}
  </div>
</script>


<script type="text/x-handlebars" data-template-name="about">
    <h2>About</h2>
    {{#link-to "me"}}Me{{/link-to}}
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="favorites">
    <h2>Favs</h2>
</script>
<script type="text/x-handlebars" data-template-name="me">
    <h2>Me</h2>
</script>

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.5.1/ember.min.js"></script>
<script src="https://rawgithub.com/ebryn/ember-model/master/ember-model.js"></script>
<script src="https://rawgithub.com/gigafied/ember-animate/master/ember-animate.js"></script>
<script src="https://rawgithub.com/EightMedia/hammer.js/master/hammer.js"></script>

CSS

.page {
    background-color: rgba(127, 127, 127, .5);
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.page.current {
    left: 0%;
}

JavaScript

var options = {
  dragLockToAxis: true,
  dragBlockHorizontal: true
};
var body = document.querySelector('body');
var hammertime = new Hammer(body, options);
hammertime.on("swipeleft swiperight", function(){
    console.log("Swiping ", ev);
});
hammertime.on("dragleft dragright", function(ev){ 
    
    console.log("Dragging ", ev);
    console.log(".....", ev.gesture.distance);
    console.log("........", ev.gesture.interimDirection);
    console.log(".........", ev.target);
    var dir = ev.gesture.interimDirection;
    var dis = ev.gesture.distance;
    var pageWidth = ev.target.offsetWidth;
    var percentShift = (dis/pageWidth) * 100;
    console.log("...........per", percentShift);
    if (dir == "left") {
        document.querySelector('.current').style.left = 
            "-"+percentShift+"%";
        document.querySelector('.next').style.left = 
            (100-percentShift)+"%";
        
    } else if (dir == "right") {
        document.querySelector('.next').style.left = 
            (100-percentShift)+"%";
        
        document.querySelector('.current').style.left = 
            "-"+percentShift+"%";
    }
    
    
    /*
    var curr = document.querySelector('.current');
    curr.style.left = "-100%";
    
    var next = document.querySelector('.next');
    next.style.left = "0%";
    */
});

/*
App = Em.Application.create();

App.Router.map(function() {
    this.resource("about", { path: "/about" }, function(){
        this.resource("me", {path: "/me"}, function(){
        
        })
    });
  this.route("favorites", { path: "/favs" });
});

App.AboutView = Ember.View.extend({
    classNames: ['page'],
    classNameBindings: ['position'],
    position:'left',
    willAnimateIn : function () {
        this.$().css("opacity", 0);
        this.set('position', 'right');
    },

    animateIn : function (done) {
        this.$().fadeTo(500, 1, done);
        this.set('position', 'transition');
    },
    didAnimateIn: function(){
       ...