<section id="slider" class="section">
      <div class="slider">
        <div class="slider__container">
          <div class="slider__item slide-burger">
            <div class="slider__content grid">
              <div class="column">
                <h1 class="title">Fly Me to</h1>
                <h1 class="title">the Moon</h1>
              </div>
              <div class="column"><img src="http://astronaomical.com/archive/archive-301B/zen-garden/planets-01.svg" class="image burger"></div>
            </div>
          </div>
          <div class="slider__item slide-astronaut">
            <div class="slider__content grid">
              <div class="column">
                <h1 class="title">And Let</h1>
                <h1 class="title">Me Play </h1>
              </div>
              <div class="column"><img src="http://astronaomical.com/archive/archive-301B/zen-garden/planets-02.svg" class="image astronaut"></div>
            </div>
          </div>
          <div class="slider__item slide-coffee">
            <div class="slider__content grid">
              <div class="column">
                <h1 class="title"> Among</h1>
                <h1 class="title">The Stars</h1>
              </div>
              <div class="column"><img src="http://astronaomical.com/archive/archive-301B/zen-garden/planets-03.svg" class="image cup"></div>
            </div>
          </div>
        </div>
      </div>
    </section>

/* https://mverissimo.github.io/tweenslideshow/dist/assets/stylesheet/application.min.css */
*,
*:after,
*:before {
	margin: 0;
	padding: 0;
	box-sizing: inherit;
}

body,
html,
a {
    cursor: url("http://astronaomical.com/archive/archive-301B/zen-garden/cursor.cur"), pointer;
}

body,
html {
	height: 100%;
}
html {
	font-size: 16px;
}
body {
    
	line-height: 1;
	font-size: 16px;
	font-family: sans-serif;
	font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	-webkit-text-size-adjust: none;
	-ms-text-size-adjust: none;
	text-size-adjust: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
}
ol li,
ul li {
	list-style: none;
}
a {
	text-decoration: none;
}
img {
	max-width: 100%;
}
.slider {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	overflow: hidden;
}
.slider__container {
	position: relative;
	width: 100%;
	height: 100%;
	display: block;
	margin: 0;
	padding: 0;
	font-size: 0;
	list-style: none;
	white-space: nowrap;
}
.slider__content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	font-size: 16px;
	visibility: hidden;
}
.slider__item {
	position: relative;
	height: 100%;
	width: 100%;
	display: inline-block;
}
.slider-controls {
	width: 100%;
	position: absolute;
	top: 50%;
	-webkit-transform: translate3d(0px, -50%, 0px);
	transform: translate3d(0px, -50%, 0px);
	z-index: 10;
}
.slider-controls > .previous,
.slider-controls > .next {
	position: absolute;
	width: 64px;
	height: 64px;
	display: block;
	cursor: pointer;
	border: none;
	outline: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-size: 64px;
	background-color: transparent;
	background-repeat: no-repeat;
}
.slider-controls > .next {
	right: 20px;
	background-image: url("../images/arrow-right.svg");
}
.slider-controls > .previous {
	left: 20px;
	background-image: url("../images/arrow-left.svg");
}
.slider-navigation {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 32px;
	text-align: center;
}
.slider-navigation > li {
	position: relative;
	display: inline-block;
	margin-right: 12px;
}
.slider-navigation > li > a {
	display: inline-block;
	width: 15px;
	height: 15px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: transparent;
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
.slider-navigation > li > a.is-active {
	background: rgba(255, 255, 255, 0.5);
	border-color: rgba(255, 255, 255, 0);
}
.section {
	position: relative;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}
.grid {
	display: table;
}
.grid > .column {
	width: 50%;
	display: table-cell;
	vertical-align: middle;
}
.grid > .column:first-child {
	text-align: right;
}
.slide-burger {
	background: #050B2B;
	background-image: url("http://astronaomical.com/archive/archive-301B/zen-garden/stars-01.png"), linear-gradient(#050B2B, #340E66);
}
.slide-astronaut {
	background: #A00078;
	background-image: url("http://astronaomical.com/archive/archive-301B/zen-garden/stars-01.png"), linear-gradient(#340E66, #A00078);
}
.slide-coffee {
	background: #340E66;
	background-image: url("http://astronaomical.com/archive/archive-301B/zen-garden/stars-01.png"), linear-gradient(#A00078, #050B2B);
}
.title {
	font-size: 60px;
	font-weight: 100;
	color: #fff;
	text-transform: uppercase;
}
@media only screen and (min-width: 768px) {
	.title {
		font-size: 7em;
	}
}

// Forked from https://codepen.io/astrixsz/pen/zBXvWx/

//check it https://github.com/mverissimo/tweenslideshow https://mverissimo.github.io/tweenslideshow/dist/assets/javascript/script.min.js

!(function() {
	"use strict";
	function t(t, e, s) {
		var i;
		return function() {
			var n = this,
				o = arguments,
				a = function() {
					(i = null), s || t.apply(n, o);
				},
				r = s && !i;
			clearTimeout(i), (i = setTimeout(a, e)), r && t.apply(n, o);
		};
	}
	function e(t, e) {
		var i = {
			selector: ".slider",
			ease: "SlowMo",
			easeType: "easeOut",
			duration: 1,
			nextHtml: "",
			prevHtml: "",
			arrows: !0,
			keyboard: !0,
			pagination: !0,
			onLeave: null,
			afterLoad: null
		};
		return (
			(this.el = document.querySelector(t)),
			(this.settings = s.extend(i, e)),
			(this.body = document.querySelector("body")),
			(this.container = this.el.querySelector(
				this.settings.selector + "__container"
			)),
			(this.items = this.el.querySelectorAll(this.settings.selector + "__item")),
			this.init(),
			this
		);
	}
	var s = {
		extend: function(t, e) {
			"object" != typeof e && (e = {});
			for (var s in e) t.hasOwnProperty(s) && (t[s] = e[s]);
			return t;
		},
		setStyle: function(t, e, s) {
			t.style[e.charAt(0).toLowerCase() + e.slice(1)] = s;
		},
		setVendor: function(t, e, s) {
			(t.style[e.charAt(0).toLowerCase() + e.slice(1)] = s),
				(t.style["webkit" + e] = s),
				(t.style["moz" + e] = s),
				(t.style["ms" + e] = s),
				(t.style["o" + e] = s);
		},
		hasClass: function(t, e) {
			return t.classList
				? t.classList.contains(e)
				: !!t.className.match(new RegExp("(\\s|^)" + e + "(\\s|$)"));
		},
		addClass: function(t, e) {
			t.classList
				? t.classList.add(e)
				: s.hasClass(t, e) || (t.className += " " + e);
		},
		removeClass: function(t, e) {
			if (t.classList) t.classList.remove(e);
			else if (s.hasClass(t, e)) {
				var i = new RegExp("(\\s|^)" + e + "(\\s|$)");
				t.className = t.className.replace(i, " ");
			}
		}
	};
	(e.prototype.init = function() {
		(this.index = 0),
			(this.slideWidth = parseInt(getComputedStyle(this.container).width)),
			this.build(),
			this.bindEvents(),
			this.makeActive(this.index),
			"function" == typeof this.settings.afterLoad &&
				this.settings.afterLoad(this.index);
	}),
		(e.prototype.build = function() {
			this.settings.arrows && this.appendArrows(),
				this.settings.pagination && this.appendPagination();
		}),
		(e.prototype.bindEvents = function() {
			var t = this;
			if (
				(this.settings.keyboard &&
					document.addEventListener("keydown", this.keyboard.bind(this)),
				this.settings.arrows &&
					(this.settings.nextHtml.addEventListener(
						"click",
						this.moveToNext.bind(this)
					),
					this.settings.prevHtml.addEventListener(
						"click",
						this.moveToPrev.bind(this)
					)),
				this.settings.pagination)
			)
				for (
					var e = document.querySelectorAll(".slider-navigation li a"), s = 0;
					s < e.length;
					s++
				)
					!(function(i) {
						e[s].addEventListener("click", function(e) {
							t.move(i), e.preventDefault();
						});
					})(s);
			window.addEventListener("resize", this.resize.bind(this), !1);
		}),
		(e.prototype.makeActive = function(t) {
			for (
				var e = document.querySelectorAll(".slider-navigation li a"), i = 0;
				i < this.items.length;
				i++
			)
				s.removeClass(this.items[i], "is-active"), s.removeClass(e[i], "is-active");
			s.addClass(this.items[t], "is-active"), s.addClass(e[t], "is-active");
		}),
		(e.prototype.move = function(t) {
			var e = new TimelineLite(),
				i = this,
				n = document.querySelector(".slider-navigation");
			return (
				s.hasClass(this.items[t], "is-active") ||
					(e.eventCallback("onStart", function() {
						s.setStyle(i.settings.prevHtml, "pointerEvents", "none"),
							s.setStyle(i.settings.nextHtml, "pointerEvents", "none"),
							s.setStyle(n, "pointerEvents", "none");
					}),
					"function" == typeof i.settings.onLeave &&
						e.add(i.settings.onLeave(i.index)),
					e.to(
						this.container,
						this.settings.duration,
						{
							x: -t * this.slideWidth,
							ease: this.settings.ease + "." + this.settings.easeType
						},
						"-=0.5"
					),
					"function" == typeof i.settings.afterLoad &&
						e.add(i.settings.afterLoad(t)),
					e.eventCallback("onComplete", function() {
						s.setStyle(i.settings.prevHtml, "pointerEvents", "auto"),
							s.setStyle(i.settings.nextHtml, "pointerEvents", "auto"),
							s.setStyle(n, "pointerEvents", "auto"),
							console.log(n);
					})),
				(this.index = t),
				this.makeActive(this.index),
				e
			);
		}),
		(e.prototype.moveToNext = function(t) {
			this.index + 1 < this.items.length && this.move(this.index + 1);
		}),
		(e.prototype.moveToPrev = function() {
			this.index > 0 && this.move(this.index - 1);
		}),
		(e.prototype.keyboard = function(t) {
			37 === t.keyCode && this.moveToPrev(), 39 === t.keyCode && this.moveToNext();
		}),
		(e.prototype.appendArrows = function() {
			var t = document.createElement("div");
			t.setAttribute("class", "slider-controls");
			var e = document.createElement("button");
			e.setAttribute("type", "button"), e.setAttribute("class", "next");
			var s = document.createElement("button");
			s.setAttribute("type", "button"),
				s.setAttribute("class", "previous"),
				this.el.appendChild(t);
			var i = this.el.querySelector(".slider-controls");
			i.appendChild(e),
				i.appendChild(s),
				(this.settings.nextHtml = e),
				(this.settings.prevHtml = s);
		}),
		(e.prototype.appendPagination = function() {
			for (var t = "", e = 0; e < this.items.length; e++)
				t += '<li><a data-index="' + e + '" href="#' + e + '"></a></li>';
			var s = document.createElement("ul");
			s.setAttribute("class", "slider-navigation"),
				(s.innerHTML = t),
				this.body.appendChild(s);
		}),
		(e.prototype.resize = t(function() {
			var t = this;
			t.slideWidth = parseInt(getComputedStyle(this.container).width);
			var e = t.slideWidth * t.index + 1;
			s.setVendor(t.container, "Transform", "matrix(1, 0, 0, 1, -" + e + ", 0)");
		}, 10)),
		(window.TuinSlider = e);
})(window);
var slider = new TuinSlider("#slider", {
	onLeave: function(e) {
		var t = new TimelineLite(),
			o = document.querySelectorAll(".slider__item"),
			r = o[e],
			a = r.querySelectorAll(".title"),
			i = r.querySelector(".burger"),
			y = r.querySelector(".astronaut"),
			c = r.querySelectorAll(".cup");
		return (
			0 === e &&
				t
					.staggerTo(a, 0.8, { y: -100, opacity: 0, ease: Power3.easeOut }, 0.5)
					.to(i, 0.6, { x: 200, opacity: 0, ease: Power3.easeOut }),
			1 === e &&
				t
					.staggerTo(a, 0.8, { y: 100, opacity: 0, ease: Power3.easeOut }, 0.5)
					.to(y, 0.5, { y: -100, opacity: 0 }, "=-1"),
			2 === e &&
				t
					.staggerTo(a, 0.8, { y: -100, opacity: 0, ease: Power3.easeOut }, 0.5)
					.to(c, 0.5, { x: 100, opacity: 0 }),
			t
		);
	},
	afterLoad: function(e) {
		var t = new TimelineLite(),
			o = document.querySelectorAll(".slider__item"),
			r = o[e],
			a = r.querySelectorAll(".title"),
			i = r.querySelector(".slider__content");
		TweenLite.set(i, { visibility: "visible" });
		var y = r.querySelector(".burger"),
			c = r.querySelector(".astronaut"),
			l = r.querySelectorAll(".cup");
		return (
			0 === e &&
				t
					.staggerFromTo(
						a,
						1,
						{ y: 100, opacity: 0 },
						{ y: 0, opacity: 1, ease: Power3.easeOut },
						0.5
					)
					.fromTo(
						y,
						1.5,
						{ x: 100, opacity: 0 },
						{ x: 0, opacity: 1, ease: Power3.easeOut },
						"-=0.6"
					),
			1 === e &&
				t
					.staggerFromTo(
						a,
						0.8,
						{ y: -100, opacity: 0 },
						{ y: 0, opacity: 1, ease: Power3.easeOut },
						0.5
					)
					.fromTo(c, 0.5, { y: 100, opacity: 0 }, { y: 0, opacity: 1 }, "=-1"),
			2 === e &&
				t
					.staggerFromTo(
						a,
						0.8,
						{ y: 100, opacity: 0 },
						{ y: 0, opacity: 1, ease: Power3.easeOut },
						0.5
					)
					.staggerFromTo(
						l,
						1.5,
						{ x: 100, opacity: 0 },
						{ x: 0, opacity: 1, ease: Power3.easeOut },
						0.5
					),
			t
		);
	}
});