Improved carousel animation UX

web/src/app/css/base.css

@@ -33,3 +33,20 @@ body {
 
 @media (max-width: 400px) { .media-max400 { display: none } }
 @media (max-width: 500px) { .media-max500 { display: none } }
+
+.slide-from-right {
+	position: relative;
+	animation: animateright 0.1s;
+}
+.slide-from-left {
+	position: relative;
+	animation: animateleft 0.1s;
+}
+@keyframes animateright {
+	from { right: -200px; opacity: .5 }
+	to   { right: 0; opacity:1 }
+}
+@keyframes animateleft {
+	from { left: -200px; opacity: .5 }
+	to   { left: 0; opacity:1 }
+}

web/src/app/js/base.js

@@ -10,6 +10,7 @@ function dragElement(elmnt, options, onStopDrag) {
 	function dragMouseDown(e) {
 		e = e || window.event;
 		e.preventDefault();
+		e.stopPropagation();
 		const isMobile = e.touches !== undefined;
 		const cx = !isMobile ? e.clientX : e.touches[0].clientX * 1.3;
 		const cy = !isMobile ? e.clientY : e.touches[0].clientY * 1.3;
@@ -30,6 +31,7 @@ function dragElement(elmnt, options, onStopDrag) {
 	function elementDrag(e) {
 		e = e || window.event;
 		e.preventDefault();
+		e.stopPropagation();
 		const isMobile = e.touches !== undefined;
 		const cx = !isMobile ? e.clientX : e.touches[0].clientX * 1.3;
 		const cy = !isMobile ? e.clientY : e.touches[0].clientY * 1.3;

web/src/app/js/carousel.js

@@ -21,15 +21,17 @@ app.carousel = {
 		const elements = mod._elements();
 		const current = elements[mod._current];
 		const next = elements[i];
-		if (mod._animation !== undefined) {
-			// TODO: animation run here
-		}
+		var direction = 'none';
+		if (i > mod._current)
+			direction = 'right';
+		else if (i < mod._current)
+			direction = 'left';
 		for (var j = 0; j < elements.length; j++)
 			elements[j].style = 'display: none';
 		next.removeAttribute('style');
 		mod._current = i;
 		if (mod._onSetEvent !== undefined)
-			mod._onSetEvent();
+			mod._onSetEvent(direction);
 		return true;
 	},
 };

web/src/app/js/pages/meet.js

@@ -46,15 +46,16 @@ app.pages.meet = {
 		_parent: function() { return document.querySelector('#page-meet #content') },
 		_elements: function() { return app.pages.meet.carousel._parent().querySelectorAll('.meet.item') },
 		_size: function() { return app.pages.meet.carousel._elements().length },
-		_onSetEvent: function() {
+		_onSetEvent: function(direction) {
 			app.storage.set('status_meet_index',
 				app.pages.meet.carousel._current);
-			app.pages.meet.carousel.setDragEvent();
+			app.pages.meet.carousel.setDragEvent(direction);
 		},
 		set: function(i) { return app.carousel.set(app.pages.meet.carousel, i) },
 		next: function() { return app.carousel.next(app.pages.meet.carousel) },
 		prev: function() { return app.carousel.prev(app.pages.meet.carousel) },
-		setDragEvent: function() {
+		setDragEvent: function(direction) {
+			direction = direction || 'none';
 			const current = app.pages.meet.carousel._elements()[
 				app.pages.meet.carousel._current];
 			var options = { y: false, return2start: true, fadeOut: true };
@@ -62,6 +63,15 @@ app.pages.meet = {
 				options.right = false;
 			if (!app.carousel.hasNext(app.pages.meet.carousel))
 				options.left = false;
+			if (direction === 'left') {
+				current.classList.add('slide-from-left');
+				setTimeout(function() {
+					current.classList.remove('slide-from-left')}, 100);
+			} else if (direction === 'right') {
+				current.classList.add('slide-from-right');
+				setTimeout(function() {
+					current.classList.remove('slide-from-right')}, 100);
+			}
 			dragElement(current, options, function(a1, a2) {
 				const ix = a1[0];
 				const fx = a2[0];