Reduced attr changes to improve performance

src/scripts/album.js

@@ -34,10 +34,7 @@ album.load = function(albumID, refresh) {
 
 	password.get(albumID, function() {
 
-		if (!refresh) {
+		if (!refresh) lychee.animate('#content', 'contentZoomOut');
-			lychee.animate('.album, .photo', 'contentZoomOut');
-			lychee.animate('#content .divider', 'fadeOut');
-		}
 
 		startTime = new Date().getTime();
 
@@ -82,7 +79,7 @@ album.load = function(albumID, refresh) {
 				view.album.init();
 
 				if (!refresh) {
-					lychee.animate('.album, .photo', 'contentZoomIn');
+					lychee.animate('#content', 'contentZoomIn');
 					header.setMode('album');
 				}
 

src/scripts/albums.js

@@ -15,8 +15,7 @@ albums.load = function() {
 		durationTime,
 		waitTime;
 
-	lychee.animate('.album, .photo', 'contentZoomOut');
+	lychee.animate('#content', 'contentZoomOut');
-	lychee.animate('#content .divider', 'fadeOut');
 
 	startTime = new Date().getTime();
 
@@ -41,7 +40,7 @@ albums.load = function() {
 			setTimeout(function() {
 				header.setMode('albums');
 				view.albums.init();
-				lychee.animate('.album', 'contentZoomIn');
+				lychee.animate('#content', 'contentZoomIn');
 			}, waitTime);
 		});
 
@@ -50,7 +49,7 @@ albums.load = function() {
 		setTimeout(function() {
 			header.setMode('albums');
 			view.albums.init();
-			lychee.animate('.album, .photo', 'contentZoomIn');
+			lychee.animate('#content', 'contentZoomIn');
 		}, 300);
 
 	}

src/scripts/search.js

@@ -53,8 +53,7 @@ search.find = function(term) {
 
 					$('.no_content').remove();
 
-					lychee.animate('.album, .photo', 'contentZoomOut');
+					lychee.animate('#content', 'contentZoomOut');
-					lychee.animate('.divider', 'fadeOut');
 
 					search.hash = data.hash;
 
@@ -65,7 +64,7 @@ search.find = function(term) {
 							$('body').append(build.no_content('magnifying-glass'));
 						} else {
 							lychee.content.html(html);
-							lychee.animate('.album, .photo', 'contentZoomIn');
+							lychee.animate('#content', 'contentZoomIn');
 							$('img[data-type!="svg"]').retina();
 						}
 

src/styles/_animations.scss

@@ -7,27 +7,13 @@
 	animation-name: fadeIn;
 	animation-duration: .3s;
 	animation-fill-mode: forwards;
-	animation-timing-function: $timingBounce;
+	animation-timing-function: $timing;
 }
 
 .fadeOut {
 	animation-name: fadeOut;
 	animation-duration: .3s;
 	animation-fill-mode: forwards;
-	animation-timing-function: $timingBounce;
-}
-
-.contentZoomIn {
-	animation-name: zoomIn;
-	animation-duration: .2s;
-	animation-fill-mode: forwards;
-	animation-timing-function: $timing;
-}
-
-.contentZoomOut {
-	animation-name: zoomOut;
-	animation-duration: .2s;
-	animation-fill-mode: forwards;
 	animation-timing-function: $timing;
 }
 

src/styles/_content.scss

@@ -20,6 +20,37 @@
 
 	&.sidebar { width: calc(100% - 300px); }
 
+	/* Animations ------------------------------------------------------------------- */
+	&.contentZoomIn .album,
+	&.contentZoomIn .photo {
+		animation-name: zoomIn;
+		animation-duration: .2s;
+		animation-fill-mode: forwards;
+		animation-timing-function: $timing;
+	}
+
+	&.contentZoomIn .divider {
+		animation-name: fadeIn;
+		animation-duration: .2s;
+		animation-fill-mode: forwards;
+		animation-timing-function: $timing;
+	}
+
+	&.contentZoomOut .album,
+	&.contentZoomOut .photo {
+		animation-name: zoomOut;
+		animation-duration: .2s;
+		animation-fill-mode: forwards;
+		animation-timing-function: $timing;
+	}
+
+	&.contentZoomOut .divider {
+		animation-name: fadeOut;
+		animation-duration: .3s;
+		animation-fill-mode: forwards;
+		animation-timing-function: $timing;
+	}
+
 	/* Albums and Photos ------------------------------------------------*/
 	.album,
 	.photo {

src/styles/_sidebar.scss

@@ -12,7 +12,7 @@
 	background-color: rgba(25, 25, 25, .98);
 	border-left: 1px solid black(.2);
 	transform: translateX(0);
-	transition: transform .3s $timingBounce;
+	transition: transform .3s $timing;
 
 	&.active { transform: translateX(-320px); }