IntroAnimation.js

class SliderControl
	constructor: (@el) ->
		# Setup references
		@progbar	= @el.find '.progress'
		@handle		= @el.find '.handle'
		@progX		= @el.offset().left
		@progW		= @el.width()
		@percent	= 0
		@progress	= 0
		@isDragging = no
		@mouseDown	= no
		
		# Bind events
		@handle.on 'mousedown', @startDrag
		@el.on 'scrubbing:tick', @updateProgress
		@el.on 'click', @drag
		$(window).on 'resize', self: this, @handleResize
	startDrag: (e) =>
		@isDragging = yes;
		@mouseDown = yes;
		
		@el.off 'click'
		$(window).on 'mousemove', @drag
		$(window).on 'mouseup', @stopDrag
	stopDrag: (e) =>
		@mouseDown = no;
		$(window).off 'mousemove', @drag
		$(window).off 'mouseup', @stopDrag
		
		setTimeout => 
				@el.on 'click', @drag
			, 500
	drag: (e) =>
		newPerc = (e.pageX - @progX) / @progW
		
		# Round to 1 decimal. ie 68.3% instead of just 68%
		newPerc = Math.round(newPerc * 1000) / 10

		if newPerc < 0 then newPerc = 0
		else if newPerc > 100 then newPerc = 100

		if e.type is 'mousemove'
			# User is scrubbing
			@percent = newPerc;
			TweenMax.to this, 0.5,
				progress: newPerc
				overwrite: 'all'
				onComplete: =>
					return if @mouseDown
					@$isDragging = no
					@el.trigger 'scrubbing:complete'
				onUpdate: =>
					@el.trigger 'scrubbing:tick', this.progress
				ease: Power2.easeOut
		else
			# User clicked
			@percent = newPerc
			TweenMax.to this, 1.2,
				progress: newPerc
				overwrite: 'all'
				onComplete: => 
					@el.isDragging = false
					@el.trigger 'scrubbing:complete'
				onUpdate: =>
					@el.trigger 'scrubbing:tick', this.progress
				ease:Elastic.easeOut
	handleResize: (e) =>
		@progX	= @el.offset().left
		@progW	= @el.width()
	updateProgress: =>
		if @progress > 100 then @progress = 100
		else if @progress < 0 then @progress = 0

		@progbar.css 'width', @progress + '%'
		@handle.css 'left', @progress + '%'
	setProgress: (prog) ->
		@progress = prog
		@updateProgress()
	getProgress:  ->
		@progress
	destroy: ->
		clearInterval @addedToStageListener
		$(window).off 'resize', @handleResize
		@el.off()
		@progbar = null;

class introAnimation
	constructor: ->
		@page				= $ '#main > article[id*=post-]'
		@header				= @page.find '> header'
		@title				= @header.find 'h1'
		@subtitle			= @header.find '.tagline'
		@content			= @page.find '> .post_content'
		@contentChildren	= @content.find '> *:not(#drag-me-boxes)'
		@dragMe				= @content.find '#drag-me-boxes'
		@timeline			= new TimelineLite(paused: yes, onComplete: @handleAnimationComplete)
		@sliderVisible		= no

		setTimeout => 
				@makeItemsVisible()
				@animate()
			, 500
	animate: ->
		tl = new TimelineLite (onComplete: => @timeline.play())

		# Page animation
		tl.from @title, 1.3, {css: {alpha: 0, y: "-50"}, ease:Power3.easeOut}
		tl.from @subtitle, 0.7, {css: {alpha: 0, y: "-20"}, ease:Power3.easeOut}, -0.3

		@contentChildren.each (i, el) => 
			if i % 2 is 0 then x = 530 - window.innerWidth else x = window.innerWidth
			tl.from $(el), 0.8, 
				css: 
					alpha: 0, x: x, 
					rotation: Math.random() * 5 - 10
				ease: Power3.easeOut
			, -0.6

		tl.to @page, 1.5, {css: {y: "+150"}, ease:Power2.easeInOut}, -1.5
		tl.to @page, 1.1, {css: {y: 0, alpha: 1}, ease:Elastic.easeOut}, -0.5
		tl.from @dragMe, 0.7, {css: {height: 0}, ease:Linear.easeNone}, -0.2

		#Drag this: text animation
		maxX = window.innerWidth
		maxY = $(window).height()

		@dragMe.find('.letter .pixel').each (i, el) =>
			subTl = new TimelineLite(delay: i * 0.1)
			subTl.from $(el), 1, 
				css: 
					alpha: 0
					x: Math.random() * maxX - (maxX / 2)
					y: Math.random() * maxY - (maxY / 2)
				ease: Power3.easeInOut
			
			TweenMax.to $(el), 0.2, {css: {backgroundColor: "#111111"}, repeat: -1, repeatDelay: Math.random() * 40 + 3, yoyo: yes}
			scaleTween = TweenMax.from $(el), 0.8, {css: {scale: Math.random() * 3, rotation: Math.random() * 360 - 180}}
			subTl.insert(scaleTween, 0.8)
			@timeline.insert subTl, 0
	makeItemsVisible: ->
		@header.css 'visibility', 'visible'
		@content.css 'visibility', 'visible'
	handleAnimationComplete: =>
		return if @sliderVisible
		@sliderVisible = yes

		@timeline.pause()
		
		@slider = new SliderControl $('#drag-me-boxes .slider-control')
		@slider.el.on 'scrubbing:tick', @updateTimeline
		@slider.setProgress 100

		obj = {progress: 1}
		
		tl = new TimelineLite
			delay: 0.4
			onComplete: =>
				TweenMax.to obj, 2, 
					progress: 0.1, 
					onUpdate: => 
						@slider.setProgress obj.progress * 100
						@timeline.progress obj.progress
					onComplete: ->
						$(window).resize()
					ease: Power2.easeInOut
					repeat: 1
					repeatDelay: 0.5
					yoyo: true

		@slider.el.find('.track .pixel').each (i, el) => 
			$pixel = $(el)
			tl.from $pixel, 0.3, {css: {alpha: 0}, ease: Linear.easeNone}, -0.28
		@slider.el.find('.handle .pixel').each (i, el) => 
			$pixel = $(el)
			$pixel.css 'opacity', 1
			tl.from $pixel, 0.6, {css: {scale: 0}, ease: Back.easeOut}, -0.5

		@slider.el.css 'display', 'block'
	updateTimeline: (e, progress) =>
		@timeline.progress (progress / 100) 

$ ->
	new introAnimation()