Back and forward animation

assets/css/imageview.css

@@ -33,9 +33,9 @@
 		background-position: 50% 50%;
 		background-size: contain;
 
-		-webkit-transition: top .3s, right .3s, bottom .3s, left .3s, margin-top .3s, -webkit-transform .3s cubic-bezier(0.51,.92,.24,1.15);
-		-moz-transition: top .3s, right .3s, bottom .3s, left .3s, margin-top .3s, -moz-transform .3s cubic-bezier(0.51,.92,.24,1.15);
-		transition: top .3s, right .3s, bottom .3s, left .3s, margin-top .3s, transform .3s cubic-bezier(0.51,.92,.24,1.15);
+		-webkit-transition: top .3s, right .3s, bottom .3s, left .3s, margin-top .3s, opacity .1s, -webkit-transform .3s cubic-bezier(0.51,.92,.24,1.15);
+		-moz-transition: top .3s, right .3s, bottom .3s, left .3s, margin-top .3s, opacity .1s, -moz-transform .3s cubic-bezier(0.51,.92,.24,1.15);
+		transition: top .3s, right .3s, bottom .3s, left .3s, margin-top .3s, opacity .1s, transform .3s cubic-bezier(0.51,.92,.24,1.15);
 
 		-webkit-animation-name: zoomIn;
 		-webkit-animation-duration: .3s;

assets/js/init.js

@@ -55,12 +55,8 @@ $(document).ready(function(){
 
 	/* Image View */
 	lychee.imageview
-		.on(event_name, ".arrow_wrapper.previous", function() {
-			if (album.json&&album.json.content[photo.getID()]&&album.json.content[photo.getID()].previousPhoto!=="") lychee.goto(album.getID() + "/" + album.json.content[photo.getID()].previousPhoto)
-		})
-		.on(event_name, ".arrow_wrapper.next", function() {
-			if (album.json&&album.json.content[photo.getID()]&&album.json.content[photo.getID()].nextPhoto!=="") lychee.goto(album.getID() + "/" + album.json.content[photo.getID()].nextPhoto)
-		});
+		.on(event_name, ".arrow_wrapper.previous", photo.previous)
+		.on(event_name, ".arrow_wrapper.next", photo.next);
 
 	/* Infobox */
 	$("#infobox")
@@ -121,11 +117,7 @@ $(document).ready(function(){
 				swipe.move(e.swipe);
 			})
 			.on('swipeEnd', function(e) {
-				swipe.stop(e.swipe, function() {
-					if (album.json&&album.json.content[photo.getID()]&&album.json.content[photo.getID()].previousPhoto!=="") lychee.goto(album.getID() + "/" + album.json.content[photo.getID()].previousPhoto)
-				}, function() {
-					if (album.json&&album.json.content[photo.getID()]&&album.json.content[photo.getID()].nextPhoto!=="") lychee.goto(album.getID() + "/" + album.json.content[photo.getID()].nextPhoto)
-				});
+				swipe.stop(e.swipe, photo.previous, photo.next);
 			});
 	}
 

assets/js/photo.js

@@ -56,6 +56,48 @@ photo = {
 
 	},
 
+	previous: function() {
+
+		if (album.json&&
+			album.json.content[photo.getID()]&&
+			album.json.content[photo.getID()].previousPhoto!=="") {
+
+				$("#image").css({
+					WebkitTransform: 'translateX(100px)',
+					MozTransform: 'translateX(100px)',
+					transform: 'translateX(100px)',
+					opacity: 0
+				});
+
+				setTimeout(function() {
+					lychee.goto(album.getID() + "/" + album.json.content[photo.getID()].previousPhoto)
+				}, 100);
+
+			}
+
+	},
+
+	next: function() {
+
+		if (album.json&&
+			album.json.content[photo.getID()]&&
+			album.json.content[photo.getID()].nextPhoto!=="") {
+
+				$("#image").css({
+					WebkitTransform: 'translateX(-100px)',
+					MozTransform: 'translateX(-100px)',
+					transform: 'translateX(-100px)',
+					opacity: 0
+				});
+
+				setTimeout(function() {
+					lychee.goto(album.getID() + "/" + album.json.content[photo.getID()].nextPhoto);
+				}, 100);
+
+			}
+
+	},
+
 	delete: function(photoIDs) {
 
 		var params,