 
 		if @isAnimating then window.requestAnimationFrame(@renderLoop)
 
-	getIntroSpread: =>
-		if (window.innerHeight > window.innerWidth)
-			return window.innerHeight / 2
-		else
-			return window.innerWidth / 10
 
 	animateIn: (complete) =>
+		# add scale effect with delay so they render at full size to avoid blur
+		TweenMax.to(env, 1.0, {
+			scaleEffect: 1,
+			ease: Power2.easeInOut,
+			delay: 0.15,
+			onComplete: complete
+		})
 		# fade in
+		staggerDelay = 0.7 / 14
 		TweenMax.staggerTo(@paths, .8, {
 			opacity: 1,
 			ease: Power2.easeInOut,
-			onComplete: complete
-		}, 0.05)
+			# onComplete: complete
+		}, staggerDelay)
 
 	animateOut: (complete) =>
-		# move back to outer edge
+		# spin out
+		numVisible = @$logoEl.children(':visible').length
+		staggerDelay = 0.7 / numVisible
 		TweenMax.staggerTo(@paths, 0.2, {
 			opacity: 0,
 			delay: 0.2
 			ease: Power4.easeInOut
-		}, 0.05)
+		}, staggerDelay)
 		TweenMax.killTweensOf(env)
 		TweenMax.to(env, 1.2, {
 		  speed: 0.2

			if time is 0
				@timeline.restart()
			else
				@timeline.timeScale(2)
				@timeline.reverse()

	# keep track of the mouse position

	# loop between exploded and logo state
	startTimeline: =>
		TweenMax.killTweensOf(env)
		@timeline = new TimelineMax({paused: false, delay: 2})

		@timeline.fromTo(env, 2, {
			spreadX:  window.innerWidth * 0.5
