import { TweenMax, Linear, TimelineMax, Power1, Power2, Bounce, ScrollTrigger } from 'gsap'
import { Callbacks } from 'jquery'

/*
 * >>========================================>
 * On Window Load
 * >>========================================>
 */

$(window).on('load', function() {
	$('body').addClass('page-loaded')
})

/*
 * >>========================================>
 * Mobile Play Button
 * >>========================================>
 */

var mobilePlayActive = false

$(window).on('scroll resize load', function() {
	var scrollPosition = $(window).scrollTop(),
		triggerPoint = $('.hero .large-button').offset().top

	if (scrollPosition > triggerPoint) {
		if (!mobilePlayActive) {
			mobilePlayActive = true
			$('body').addClass('mobile-play-button-active')
		}
	} else {
		if (mobilePlayActive) {
			mobilePlayActive = false
			$('body').removeClass('mobile-play-button-active')
		}
	}
})

/*
 * >>========================================>
 * Corner Banner Animation
 * >>========================================>
 */

TweenMax.fromTo($('.corner-banner .text'), 5, { x: -180 }, { x: 0, repeat: -1, ease: Linear.easeNone })

/*
 * >>========================================>
 * Arrow Animation
 * >>========================================>
 */

var arrowAnimation = new TimelineMax({
	repeat: -1
})

arrowAnimation
	.fromTo('.dotted-arrow.one', 0.7, { opacity: 0 }, { opacity: 1, ease: Linear.easeNone })
	.fromTo('.dotted-arrow.two', 0.7, { opacity: 0 }, { opacity: 1, ease: Linear.easeNone })
	.fromTo('.dotted-arrow.three', 0.7, { opacity: 0 }, { opacity: 1, ease: Linear.easeNone })
	.to('.dotted-arrow.one', 1, { opacity: 0, ease: Linear.easeNone }, 'arrowRightOut')
	.to('.dotted-arrow.two', 1, { opacity: 0, ease: Linear.easeNone }, 'arrowRightOut')
	.to('.dotted-arrow.three', 1, { opacity: 0, ease: Linear.easeNone }, 'arrowRightOut')

/*
 * >>========================================>
 * Streak Animation
 * >>========================================>
 */

var totalStreakGroups0 = $('.hero .streak-group').length,
	currentStreakGroup0 = 0,
	streakSequence0 = [5]

var totalStreakGroups1 = $('.hero .streak-group').length,
	currentStreakGroup1 = 0,
	streakSequence1 = [13, 14]

var totalStreakGroups = $('.hero .streak-group').length,
	currentStreakGroup = 0,
	streakSequence = [1, 2, 4, 6, 8, 9, 10, 11, 15, 16, 17, 18]

var totalStreakGroupsFeatures1 = $('.featured-contests .streak-group').length,
	currentStreakGroupFeatures1 = 0,
	streakSequenceFeatures1 = [1]

var totalStreakGroupsFeatures2 = $('.featured-contests .streak-group').length,
	currentStreakGroupFeatures2 = 0,
	streakSequenceFeatures2 = [2]

var totalStreakGroupsFeatures3 = $('.featured-contests .streak-group').length,
	currentStreakGroupFeatures3 = 0,
	streakSequenceFeatures3 = [3]

function weGoingStreaking0() {
	var $group = $('.hero .streak-group:nth-child(' + streakSequence0[currentStreakGroup0] + ')')
	$group.find('.streak').each(function() {
		var $streak = $(this),
			delay = 0.2,
			streakDelay = $streak.index() * delay
		startStreak0($streak, streakDelay)
	})
	currentStreakGroup0++
	if (currentStreakGroup0 > streakSequence0.length - 1) {
		currentStreakGroup0 = 0
	}
}

function weGoingStreaking1() {
	var $group = $('.hero .streak-group:nth-child(' + streakSequence1[currentStreakGroup1] + ')')
	$group.find('.streak').each(function() {
		var $streak = $(this),
			delay = 0.2,
			streakDelay = $streak.index() * delay
		startStreak1($streak, streakDelay)
	})
	currentStreakGroup1++
	if (currentStreakGroup1 > streakSequence1.length - 1) {
		currentStreakGroup1 = 0
	}
}

function weGoingStreakingFeatures1() {
	var $group = $('.featured-contests .streak-group:nth-child(' + streakSequenceFeatures1[currentStreakGroupFeatures1] + ')')
	$group.find('.streak').each(function() {
		var $streak = $(this),
			delay = 0.2,
			streakDelay = $streak.index() * delay
		startStreakFeatures1($streak, streakDelay)
	})
	currentStreakGroupFeatures1++
	if (currentStreakGroupFeatures1 > streakSequenceFeatures1.length - 1) {
		currentStreakGroupFeatures1 = 0
	}
}

function weGoingStreakingFeatures2() {
	var $group = $('.featured-contests .streak-group:nth-child(' + streakSequenceFeatures2[currentStreakGroupFeatures2] + ')')
	$group.find('.streak').each(function() {
		var $streak = $(this),
			delay = 0.2,
			streakDelay = $streak.index() * delay
		startStreakFeatures2($streak, streakDelay)
	})
	currentStreakGroupFeatures2++
	if (currentStreakGroupFeatures2 > streakSequenceFeatures2.length - 1) {
		currentStreakGroupFeatures2 = 0
	}
}

function weGoingStreakingFeatures3() {
	var $group = $('.featured-contests .streak-group:nth-child(' + streakSequenceFeatures3[currentStreakGroupFeatures3] + ')')
	$group.find('.streak').each(function() {
		var $streak = $(this),
			delay = 0.2,
			streakDelay = $streak.index() * delay
		startStreakFeatures3($streak, streakDelay)
	})
	currentStreakGroupFeatures3++
	if (currentStreakGroupFeatures3 > streakSequenceFeatures3.length - 1) {
		currentStreakGroupFeatures3 = 0
	}
}

var flagStreak = true
function weGoingStreaking() {
	if (flagStreak) {
		flagStreak = false
		var $group = $('.hero .streak-group:nth-child(' + streakSequence[currentStreakGroup] + ')')
		$group.find('.streak').each(function() {
			var $streak = $(this),
				delay = 0.2,
				streakDelay = $streak.index() * delay
			startStreak($streak, streakDelay)
		})

		currentStreakGroup++
		if (currentStreakGroup > streakSequence.length - 1) {
			currentStreakGroup = 0
		}
	}
}

function startStreak($streak, streakDelay) {
	var streakAnimation = new TimelineMax({
		repeat: 0,
		delay: streakDelay
	})

	streakAnimation
		.fromTo($streak.find('.circle .dot'), 1, { x: -200 }, { x: 0, ease: Power1.easeOut }, 'streakIn')
		.fromTo($streak.find('.gradient'), 1, { x: 200 }, { x: 0, ease: Power1.easeOut }, 'streakIn')
		.fromTo($streak.find('.lines'), 1, { x: 200 }, { x: 0, ease: Power1.easeOut }, 'streakIn')
		.fromTo($streak.find('.circle'), 1, { css: { borderColor: '#6200EA' } }, { css: { borderColor: '#F32B94' }, ease: Power1.easeOut }, 'streakIn')
		.add(function() {
			if ($streak.is(':last-child')) {
				flagStreak = true
				if (!$streak.find('.bubbles').length) {
					$streak.append('<div class="bubbles"><div class="dot"><img src="img/dot.svg" alt=""></div><div class="dot"><img src="img/dot.svg" alt=""></div><div class="dot"><img src="img/dot.svg" alt=""></div></div>')
				}
				streakComplete($streak.find('.bubbles'))
				weGoingStreaking()
			}
		}, 0.6)
		.fromTo($streak.find('.gradient'), 1, { opacity: 1 }, { opacity: 0, delay: 1, ease: Power1.easeIn }, 'streakOut')
		.fromTo($streak.find('.lines'), 1, { opacity: 1 }, { opacity: 0, delay: 1, ease: Power1.easeOut }, 'streakOut')
		.fromTo($streak.find('.circle .dot'), 0.5, { opacity: 1 }, { opacity: 0, delay: 1, ease: Power1.easeOut }, 'circleOut')
		.to($streak.find('.circle'), 0.5, { css: { borderColor: '#6200EA' }, delay: 1, ease: Power1.easeOut }, 'circleOut')
}

var flagCall = true
function startStreak0($streak, streakDelay) {
	var streakAnimation = new TimelineMax({
		repeat: 0,
		delay: streakDelay,
		onComplete: function() {
			if ($streak.is(':last-child')) {
				setTimeout(function() {
					weGoingStreaking0()
				}, 5000)
			}
		}
	})

	var rotationworks = new TweenMax.fromTo($('.hero .rotating-words.paused .st0'), 0.5, { fill: '#6200EA' }, { fill: '#F32B94', yoyo: true, repeat: -1, ease: Linear.easeNone })
	rotationworks.pause()

	streakAnimation
		.fromTo($streak.find('.circle .dot'), 1, { x: -200 }, { x: 0, ease: Power1.easeOut }, 'streakIn')
		.fromTo($streak.find('.gradient'), 1, { x: 200 }, { x: 0, ease: Power1.easeOut }, 'streakIn')
		.fromTo($streak.find('.lines'), 1, { x: 200 }, { x: 0, ease: Power1.easeOut }, 'streakIn')
		.fromTo($streak.find('.circle'), 1, { css: { borderColor: '#6200EA' } }, { css: { borderColor: '#F32B94' }, ease: Power1.easeOut }, 'streakIn')
		.add(function() {
			if ($streak.is(':last-child')) {
				if (!$streak.find('.bubbles').length) {
					$streak.append('<div class="bubbles"><div class="dot"><img src="img/dot.svg" alt=""></div><div class="dot"><img src="img/dot.svg" alt=""></div><div class="dot"><img src="img/dot.svg" alt=""></div></div>')
				}
				streakComplete($streak.find('.bubbles'))
				$('#tubeL').addClass('open')
				setTimeout(function() {
					$('.animation-stage').addClass('start')
					if (flagCall) {
						TweenMax.fromTo($('.hero-static .make path'), 0.5, { fill: '#6200EA' }, { fill: '#F32B94', yoyo: true, repeat: -1, ease: Linear.easeNone })
					}
					rotationworks.play()
					setTimeout(function() {
						if (flagCall) {
							weGoingStreaking()
							grid()
							$('.animation-stage').addClass('run')
							flagCall = false
						}
						setTimeout(function() {
							rotationworks.pause()
							$('#tubeL').removeClass('open')
							$('.animation-stage').removeClass('start')
						}, 4000)
					}, 2000)
				}, 2000)
			}
		}, 0.6)
		.fromTo($streak.find('.gradient'), 1, { opacity: 1 }, { opacity: 0, delay: 1, ease: Power1.easeIn }, 'streakOut')
		.fromTo($streak.find('.lines'), 1, { opacity: 1 }, { opacity: 0, delay: 1, ease: Power1.easeOut }, 'streakOut')
		.fromTo($streak.find('.circle .dot'), 0.5, { opacity: 1 }, { opacity: 0, delay: 1, ease: Power1.easeOut }, 'circleOut')
		.to($streak.find('.circle'), 0.5, { css: { borderColor: '#6200EA' }, delay: 1, ease: Power1.easeOut }, 'circleOut')
}

function startStreak1($streak, streakDelay) {
	var streakAnimation = new TimelineMax({
		repeat: 0,
		delay: streakDelay,
		onComplete: function() {
			if ($streak.is(':last-child')) {
			}
		}
	})

	streakAnimation
		.fromTo($streak.find('.circle .dot'), 1, { x: -200 }, { x: 0, ease: Power1.easeOut }, 'streakIn')
		.fromTo($streak.find('.gradient'), 1, { x: 200 }, { x: 0, ease: Power1.easeOut }, 'streakIn')
		.fromTo($streak.find('.lines'), 1, { x: 200 }, { x: 0, ease: Power1.easeOut }, 'streakIn')
		.fromTo($streak.find('.circle'), 1, { css: { borderColor: '#6200EA' } }, { css: { borderColor: '#F32B94' }, ease: Power1.easeOut }, 'streakIn')
		.add(function() {
			if ($streak.is(':last-child')) {
				if (!$streak.find('.bubbles').length) {
					$streak.append('<div class="bubbles"><div class="dot"><img src="img/dot.svg" alt=""></div><div class="dot"><img src="img/dot.svg" alt=""></div><div class="dot"><img src="img/dot.svg" alt=""></div></div>')
				}
				streakComplete($streak.find('.bubbles'))
				$('#tubeV').addClass('open')
				if (!$streak.parent().hasClass('fourteen')) {
					weGoingStreaking1()
				} else {
					setTimeout(function() {
						weGoingStreaking1()
					}, 7000)
				}

				setTimeout(function() {
					$('#tubeV').removeClass('open')
				}, 2000)
			}
		}, 0.6)
		.fromTo($streak.find('.gradient'), 1, { opacity: 1 }, { opacity: 0, delay: 1, ease: Power1.easeIn }, 'streakOut')
		.fromTo($streak.find('.lines'), 1, { opacity: 1 }, { opacity: 0, delay: 1, ease: Power1.easeOut }, 'streakOut')
		.fromTo($streak.find('.circle .dot'), 0.5, { opacity: 1 }, { opacity: 0, delay: 1, ease: Power1.easeOut }, 'circleOut')
		.to($streak.find('.circle'), 0.5, { css: { borderColor: '#6200EA' }, delay: 1, ease: Power1.easeOut }, 'circleOut')
}

function startStreakFeatures1($streak, streakDelay) {
	var streakAnimation = new TimelineMax({
		repeat: 0,
		delay: streakDelay,
		onComplete: function() {
			if ($streak.is(':last-child')) {
				setTimeout(function() {
					$('#tube-invert').removeClass('open')
					//setTimeout(function() {
					weGoingStreakingFeatures1()
					//}, 1000)
				}, 1520)
			}
		}
	})

	streakAnimation
		.fromTo($streak.find('.circle .dot'), 1, { x: -200 }, { x: 0, ease: Power1.easeOut }, 'streakIn')
		.fromTo($streak.find('.gradient'), 1, { x: 200 }, { x: 0, ease: Power1.easeOut }, 'streakIn')
		.fromTo($streak.find('.lines'), 1, { x: 200 }, { x: 0, ease: Power1.easeOut }, 'streakIn')
		.fromTo($streak.find('.circle'), 1, { css: { borderColor: '#6200EA' } }, { css: { borderColor: '#F32B94' }, ease: Power1.easeOut }, 'streakIn')
		.add(function() {
			if ($streak.is(':last-child')) {
				setTimeout(function() {
					$('#tube-invert').addClass('open')
				}, 500)
			}
		}, 0.6)
		.fromTo($streak.find('.gradient'), 1, { opacity: 1 }, { opacity: 0, delay: 1, ease: Power1.easeIn }, 'streakOut')
		.fromTo($streak.find('.lines'), 1, { opacity: 1 }, { opacity: 0, delay: 1, ease: Power1.easeOut }, 'streakOut')
		.fromTo($streak.find('.circle .dot'), 0.5, { opacity: 1 }, { opacity: 0, delay: 1, ease: Power1.easeOut }, 'circleOut')
		.to($streak.find('.circle'), 0.5, { css: { borderColor: '#6200EA' }, delay: 1, ease: Power1.easeOut }, 'circleOut')
}

function startStreakFeatures2($streak, streakDelay) {
	var streakAnimation = new TimelineMax({
		repeat: 0,
		delay: streakDelay,
		onComplete: function() {
			if ($streak.is(':last-child')) {
				setTimeout(function() {
					$('#tubeL-invert').removeClass('open')
					//setTimeout(function() {
					weGoingStreakingFeatures2()
					//}, 1000)
				}, 2850)
			}
		}
	})

	streakAnimation
		.fromTo($streak.find('.circle .dot'), 1, { x: -200 }, { x: 0, ease: Power1.easeOut }, 'streakIn')
		.fromTo($streak.find('.gradient'), 1, { x: 200 }, { x: 0, ease: Power1.easeOut }, 'streakIn')
		.fromTo($streak.find('.lines'), 1, { x: 200 }, { x: 0, ease: Power1.easeOut }, 'streakIn')
		.fromTo($streak.find('.circle'), 1, { css: { borderColor: '#6200EA' } }, { css: { borderColor: '#F32B94' }, ease: Power1.easeOut }, 'streakIn')
		.add(function() {
			if ($streak.is(':last-child')) {
				setTimeout(function() {
					$('#tubeL-invert').addClass('open')
				}, 500)
			}
		}, 0.6)
		.fromTo($streak.find('.gradient'), 1, { opacity: 1 }, { opacity: 0, delay: 1, ease: Power1.easeIn }, 'streakOut')
		.fromTo($streak.find('.lines'), 1, { opacity: 1 }, { opacity: 0, delay: 1, ease: Power1.easeOut }, 'streakOut')
		.fromTo($streak.find('.circle .dot'), 0.5, { opacity: 1 }, { opacity: 0, delay: 1, ease: Power1.easeOut }, 'circleOut')
		.to($streak.find('.circle'), 0.5, { css: { borderColor: '#6200EA' }, delay: 1, ease: Power1.easeOut }, 'circleOut')
}

function startStreakFeatures3($streak, streakDelay) {
	var streakAnimation = new TimelineMax({
		repeat: 0,
		delay: streakDelay,
		onComplete: function() {
			if ($streak.is(':last-child')) {
				setTimeout(function() {
					weGoingStreakingFeatures3()
				}, 1000)
			}
		}
	})

	streakAnimation
		.fromTo($streak.find('.circle .dot'), 1, { x: -200 }, { x: 0, ease: Power1.easeOut }, 'streakIn')
		.fromTo($streak.find('.gradient'), 1, { x: 200 }, { x: 0, ease: Power1.easeOut }, 'streakIn')
		.fromTo($streak.find('.lines'), 1, { x: 200 }, { x: 0, ease: Power1.easeOut }, 'streakIn')
		.fromTo($streak.find('.circle'), 1, { css: { borderColor: '#6200EA' } }, { css: { borderColor: '#F32B94' }, ease: Power1.easeOut }, 'streakIn')
		.fromTo($streak.find('.gradient'), 1, { opacity: 1 }, { opacity: 0, delay: 1, ease: Power1.easeIn }, 'streakOut')
		.fromTo($streak.find('.lines'), 1, { opacity: 1 }, { opacity: 0, delay: 1, ease: Power1.easeOut }, 'streakOut')
		.fromTo($streak.find('.circle .dot'), 0.5, { opacity: 1 }, { opacity: 0, delay: 1, ease: Power1.easeOut }, 'circleOut')
		.to($streak.find('.circle'), 0.5, { css: { borderColor: '#6200EA' }, delay: 1, ease: Power1.easeOut }, 'circleOut')
}

function streakComplete($bubbles) {
	var heroBubbles1 = new TimelineMax({
		repeat: 0
	})

	heroBubbles1
		.add('moveY', 0)
		.fromTo($bubbles.find('.dot:nth-child(1)'), 1, { scale: 0 }, { scale: 1, ease: Linear.easeNone }, 'moveY')
		.fromTo($bubbles.find('.dot:nth-child(1)'), 0.5, { opacity: 0 }, { opacity: 1, ease: Linear.easeNone }, 'moveY')
		.fromTo($bubbles.find('.dot:nth-child(1)'), 4, { y: 0 }, { y: -80, ease: Linear.easeNone }, 'moveY')
		.fromTo($bubbles.find('.dot:nth-child(1)'), 0.2, { opacity: 1 }, { opacity: 0, delay: 3, ease: Linear.easeNone }, 'moveY')
		.to($bubbles.find('.dot:nth-child(1) img'), 4, { x: 10, ease: Power1.easeInOut }, 0)
		.to($bubbles.find('.dot:nth-child(1) img'), 7, { x: -10, ease: Power1.easeInOut }, 4)

	var heroBubbles2 = new TimelineMax({
		repeat: 0
	})

	heroBubbles2
		.add('moveY', 0)
		.fromTo($bubbles.find('.dot:nth-child(2)'), 1, { scale: 0 }, { scale: 0.4, ease: Linear.easeNone }, 'moveY')
		.fromTo($bubbles.find('.dot:nth-child(2)'), 0.1, { opacity: 0 }, { opacity: 1, ease: Linear.easeNone }, 'moveY')
		.fromTo($bubbles.find('.dot:nth-child(2)'), 3, { y: 0 }, { y: -70, ease: Linear.easeNone }, 'moveY')
		.fromTo($bubbles.find('.dot:nth-child(2)'), 0.2, { opacity: 1 }, { opacity: 0, delay: 3, ease: Linear.easeNone }, 'moveY')
		.to($bubbles.find('.dot:nth-child(2) img'), 4, { x: -10, ease: Power1.easeInOut }, 0)
		.to($bubbles.find('.dot:nth-child(2) img'), 3, { x: 10, ease: Power1.easeInOut }, 3)

	var heroBubbles3 = new TimelineMax({
		repeat: 0
	})

	heroBubbles3
		.add('moveY', 0)
		.fromTo($bubbles.find('.dot:nth-child(3)'), 1, { scale: 0 }, { scale: 0.7, ease: Linear.easeNone }, 'moveY')
		.fromTo($bubbles.find('.dot:nth-child(3)'), 0.5, { opacity: 0 }, { opacity: 1, ease: Linear.easeNone }, 'moveY')
		.fromTo($bubbles.find('.dot:nth-child(3)'), 4, { y: 0 }, { y: -50, ease: Linear.easeNone }, 'moveY')
		.fromTo($bubbles.find('.dot:nth-child(3)'), 0.2, { opacity: 1 }, { opacity: 0, delay: 2.8, ease: Linear.easeNone }, 'moveY')
		.to($bubbles.find('.dot:nth-child(3) img'), 4, { x: 10, ease: Power1.easeInOut }, 0)
		.to($bubbles.find('.dot:nth-child(3) img'), 4, { x: -20, ease: Power1.easeInOut }, 2.5)
}

$(document).ready(function() {
	weGoingStreaking0()
	setTimeout(weGoingStreaking1, 6000)
})

/*
 * >>========================================>
 * Grid Animation
 * >>========================================>
 */

function grid() {
	var boxSpace = 28.5,
		$box1 = $('.hero .grid-animation .box:nth-child(1)'),
		$box2 = $('.hero .grid-animation .box:nth-child(2)'),
		$box3 = $('.hero .grid-animation .box:nth-child(3)'),
		$box4 = $('.hero .grid-animation .box:nth-child(4)'),
		boxMove1 = new TimelineMax({
			repeat: -1
		}),
		boxMove2 = new TimelineMax({
			repeat: -1
		}),
		boxMove3 = new TimelineMax({
			repeat: -1
		}),
		boxMove4 = new TimelineMax({
			repeat: -1
		})

	boxMove1
		.to($box1, 1, { x: '+=' + boxSpace, ease: Power1.easeInOut })
		.to($box1, 1, { x: '+=' + boxSpace, ease: Power1.easeInOut })
		.to($box1, 1, { y: '+=' + boxSpace, ease: Power1.easeInOut })
		.to($box1, 1, { y: '+=' + boxSpace, ease: Power1.easeInOut })
		.to($box1, 1, { x: '+=' + boxSpace, y: '+=' + boxSpace, ease: Power1.easeInOut })
		.to($box1, 1, { x: '-=' + boxSpace, y: '-=' + boxSpace, ease: Power1.easeInOut })
		.to($box1, 1, { x: '-=' + boxSpace, y: '+=' + boxSpace, ease: Power1.easeInOut })
		.to($box1, 1, { x: '-=' + boxSpace, ease: Power1.easeInOut })
		.to($box1, 1, { y: '-=' + boxSpace, ease: Power1.easeInOut })
		.to($box1, 1, { y: '-=' + boxSpace, ease: Power1.easeInOut })
		.to($box1, 1, { x: '-=' + boxSpace, ease: Power1.easeInOut })
		.to($box1, 1, { x: 0, y: 0, ease: Power1.easeInOut })

	boxMove2
		.to($box2, 1, { y: '-=' + boxSpace, ease: Power1.easeInOut })
		.to($box2, 1, { x: '+=' + boxSpace, ease: Power1.easeInOut })
		.to($box2, 1, { y: '-=' + boxSpace, ease: Power1.easeInOut })
		.to($box2, 1, { x: '+=' + boxSpace, y: '-=' + boxSpace, ease: Power1.easeInOut })
		.to($box2, 1, { x: '-=' + boxSpace, ease: Power1.easeInOut })
		.to($box2, 1, { y: '+=' + boxSpace, ease: Power1.easeInOut })
		.to($box2, 1, { y: '+=' + boxSpace, ease: Power1.easeInOut })
		.to($box2, 1, { x: '-=' + boxSpace, ease: Power1.easeInOut })
		.to($box2, 1, { x: '+=' + boxSpace, y: '+=' + boxSpace, ease: Power1.easeInOut })
		.to($box2, 1, { x: 0, y: 0, ease: Power1.easeInOut })

	boxMove3
		.to($box3, 1, { y: '-=' + boxSpace, ease: Power1.easeInOut })
		.to($box3, 1, { x: '-=' + boxSpace, ease: Power1.easeInOut })
		.to($box3, 1, { y: '-=' + boxSpace, ease: Power1.easeInOut })
		.to($box3, 1, { x: '-=' + boxSpace, y: '+=' + boxSpace, ease: Power1.easeInOut })
		.to($box3, 1, { x: '-=' + boxSpace, ease: Power1.easeInOut })
		.to($box3, 1, { y: '+=' + boxSpace, ease: Power1.easeInOut })
		.to($box3, 1, { x: '+=' + boxSpace, ease: Power1.easeInOut })
		.to($box3, 1, { x: '+=' + boxSpace, ease: Power1.easeInOut })
		.to($box3, 1, { x: '+=' + boxSpace, ease: Power1.easeInOut })
		.to($box3, 1, { x: 0, y: 0, ease: Power1.easeInOut })

	boxMove4
		.to($box4, 1, { y: '-=' + boxSpace, ease: Power1.easeInOut })
		.to($box4, 1, { y: '-=' + boxSpace, ease: Power1.easeInOut })
		.to($box4, 1, { y: '-=' + boxSpace, ease: Power1.easeInOut })
		.to($box4, 1, { x: '+=' + boxSpace, ease: Power1.easeInOut })
		.to($box4, 1, { x: '+=' + boxSpace, ease: Power1.easeInOut })
		.to($box4, 1, { x: '+=' + boxSpace, ease: Power1.easeInOut })
		.to($box4, 1, { x: '-=' + boxSpace, y: '+=' + boxSpace, ease: Power1.easeInOut })
		.to($box4, 1, { x: '-=' + boxSpace, y: '+=' + boxSpace, ease: Power1.easeInOut })
		.to($box4, 1, { x: 0, y: 0, ease: Power1.easeInOut })
}

function gridFooter() {
	var boxSpace = 29,
		$box11 = $('.main-footer .box:nth-child(5n - 4)'),
		$box22 = $('.main-footer .box:nth-child(5n - 3)'),
		$box33 = $('.main-footer .box:nth-child(5n - 2)'),
		$box44 = $('.main-footer .box:nth-child(5n - 1)'),
		boxMove11 = new TimelineMax({
			repeat: -1
		}),
		boxMove22 = new TimelineMax({
			repeat: -1
		}),
		boxMove33 = new TimelineMax({
			repeat: -1
		}),
		boxMove44 = new TimelineMax({
			repeat: -1
		})

	boxMove11
		.to($box11, 1, { x: '+=' + boxSpace, ease: Power1.easeInOut })
		.to($box11, 1, { x: '+=' + boxSpace, ease: Power1.easeInOut })
		.to($box11, 1, { y: '+=' + boxSpace, ease: Power1.easeInOut })
		.to($box11, 1, { y: '+=' + boxSpace, ease: Power1.easeInOut })
		.to($box11, 1, { x: '+=' + boxSpace, y: '+=' + boxSpace, ease: Power1.easeInOut })
		.to($box11, 1, { x: '-=' + boxSpace, y: '-=' + boxSpace, ease: Power1.easeInOut })
		.to($box11, 1, { x: '-=' + boxSpace, y: '+=' + boxSpace, ease: Power1.easeInOut })
		.to($box11, 1, { x: '-=' + boxSpace, ease: Power1.easeInOut })
		.to($box11, 1, { y: '-=' + boxSpace, ease: Power1.easeInOut })
		.to($box11, 1, { y: '-=' + boxSpace, ease: Power1.easeInOut })
		.to($box11, 1, { x: '-=' + boxSpace, ease: Power1.easeInOut })
		.to($box11, 1, { x: 0, y: 0, ease: Power1.easeInOut })

	boxMove22
		.to($box22, 1, { y: '-=' + boxSpace, ease: Power1.easeInOut })
		.to($box22, 1, { x: '+=' + boxSpace, ease: Power1.easeInOut })
		.to($box22, 1, { y: '-=' + boxSpace, ease: Power1.easeInOut })
		.to($box22, 1, { x: '+=' + boxSpace, y: '-=' + boxSpace, ease: Power1.easeInOut })
		.to($box22, 1, { x: '-=' + boxSpace, ease: Power1.easeInOut })
		.to($box22, 1, { y: '+=' + boxSpace, ease: Power1.easeInOut })
		.to($box22, 1, { y: '+=' + boxSpace, ease: Power1.easeInOut })
		.to($box22, 1, { x: '-=' + boxSpace, ease: Power1.easeInOut })
		.to($box22, 1, { x: '+=' + boxSpace, y: '+=' + boxSpace, ease: Power1.easeInOut })
		.to($box22, 1, { x: 0, y: 0, ease: Power1.easeInOut })

	boxMove33
		.to($box33, 1, { y: '-=' + boxSpace, ease: Power1.easeInOut })
		.to($box33, 1, { x: '-=' + boxSpace, ease: Power1.easeInOut })
		.to($box33, 1, { y: '-=' + boxSpace, ease: Power1.easeInOut })
		.to($box33, 1, { x: '-=' + boxSpace, y: '+=' + boxSpace, ease: Power1.easeInOut })
		.to($box33, 1, { x: '-=' + boxSpace, ease: Power1.easeInOut })
		.to($box33, 1, { y: '+=' + boxSpace, ease: Power1.easeInOut })
		.to($box33, 1, { x: '+=' + boxSpace, ease: Power1.easeInOut })
		.to($box33, 1, { x: '+=' + boxSpace, ease: Power1.easeInOut })
		.to($box33, 1, { x: '+=' + boxSpace, ease: Power1.easeInOut })
		.to($box33, 1, { x: 0, y: 0, ease: Power1.easeInOut })

	boxMove44
		.to($box44, 1, { y: '-=' + boxSpace, ease: Power1.easeInOut })
		.to($box44, 1, { y: '-=' + boxSpace, ease: Power1.easeInOut })
		.to($box44, 1, { y: '-=' + boxSpace, ease: Power1.easeInOut })
		.to($box44, 1, { x: '+=' + boxSpace, ease: Power1.easeInOut })
		.to($box44, 1, { x: '+=' + boxSpace, ease: Power1.easeInOut })
		.to($box44, 1, { x: '+=' + boxSpace, ease: Power1.easeInOut })
		.to($box44, 1, { x: '-=' + boxSpace, y: '+=' + boxSpace, ease: Power1.easeInOut })
		.to($box44, 1, { x: '-=' + boxSpace, y: '+=' + boxSpace, ease: Power1.easeInOut })
		.to($box44, 1, { x: 0, y: 0, ease: Power1.easeInOut })
}
/*
 * >>========================================>
 * How It Works 0
 * >>========================================>
 */

var hiw0 = new TimelineMax({
	repeat: -1,
	repeatDelay: 2
})

var hiw0Bubble1 = new TimelineMax({
	repeat: 0,
	paused: true
})

hiw0Bubble1
	.add('moveY', 0)
	.to($('.hiw-0 .dot:nth-child(1)'), 4, { scale: 1.5, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-0 .dot:nth-child(1)'), 0.5, { opacity: 0.9, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-0 .dot:nth-child(1)'), 8, { y: -100, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-0 .dot:nth-child(1)'), 0.2, { opacity: 0, delay: 3.5, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-0 .dot:nth-child(1) img'), 1, { x: -5, ease: Power2.easeInOut }, 0)
	.to($('.hiw-0 .dot:nth-child(1) img'), 3, { x: 10, ease: Power2.easeInOut }, 1)

var hiw0Bubble2 = new TimelineMax({
	repeat: 0,
	paused: true
})

hiw0Bubble2
	.add('moveY', 0)
	.fromTo($('.hiw-0 .dot:nth-child(2)'), 0.5, { scale: 0 }, { scale: 0.4, ease: Bounce.easeIn }, 'moveY')
	.to($('.hiw-0 .dot:nth-child(2)'), 0.5, { opacity: 1, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-0 .dot:nth-child(2)'), 3, { y: -70, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-0 .dot:nth-child(2)'), 0.2, { opacity: 0, delay: 2, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-0 .dot:nth-child(2) img'), 1, { x: 0, ease: Power1.easeInOut }, 0)
	.to($('.hiw-0 .dot:nth-child(2) img'), 1.5, { x: 3, ease: Power1.easeInOut }, 1)

var hiw0Bubble3 = new TimelineMax({
	repeat: 0,
	paused: true
})

hiw0Bubble3
	.add('moveY', 0)
	.fromTo($('.hiw-0 .dot:nth-child(3)'), 0.5, { scale: 0 }, { scale: 0.7, ease: Bounce.easeIn }, 'moveY')
	.to($('.hiw-0 .dot:nth-child(3)'), 0.5, { opacity: 1, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-0 .dot:nth-child(3)'), 4, { y: -90, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-0 .dot:nth-child(3)'), 0.2, { opacity: 0, delay: 3, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-0 .dot:nth-child(3) img'), 1, { x: 20, ease: Power1.easeInOut }, 0)
	.to($('.hiw-0 .dot:nth-child(3) img'), 1.5, { x: -5, ease: Power1.easeInOut }, 1)

var hiw0Bubble4 = new TimelineMax({
	repeat: 0,
	paused: true
})

hiw0Bubble4
	.add('moveY', 0)
	.fromTo($('.hiw-0 .dot:nth-child(4)'), 0.5, { scale: 0 }, { scale: 0.7, ease: Bounce.easeIn }, 'moveY')
	.to($('.hiw-0 .dot:nth-child(4)'), 0.5, { opacity: 1, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-0 .dot:nth-child(4)'), 4, { y: -90, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-0 .dot:nth-child(4)'), 0.2, { opacity: 0, delay: 4, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-0 .dot:nth-child(4) img'), 1, { x: 20, ease: Power1.easeInOut }, 0)
	.to($('.hiw-0 .dot:nth-child(4) img'), 1.5, { x: -5, ease: Power1.easeInOut }, 1)

/*
 * >>========================================>
 * How It Works 1
 * >>========================================>
 */

var hiw1 = new TimelineMax({
	repeat: -1,
	repeatDelay: 2
})

var hiw1Bubble1 = new TimelineMax({
	repeat: 0,
	paused: true
})

hiw1Bubble1
	.add('moveY', 0)
	.to($('.hiw-1 .dot:nth-child(1)'), 4, { scale: 1.5, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-1 .dot:nth-child(1)'), 0.5, { opacity: 0.9, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-1 .dot:nth-child(1)'), 8, { y: -100, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-1 .dot:nth-child(1)'), 0.2, { opacity: 0, delay: 3.5, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-1 .dot:nth-child(1) img'), 1, { x: -5, ease: Power2.easeInOut }, 0)
	.to($('.hiw-1 .dot:nth-child(1) img'), 3, { x: 10, ease: Power2.easeInOut }, 1)

var hiw1Bubble2 = new TimelineMax({
	repeat: 0,
	paused: true
})

hiw1Bubble2
	.add('moveY', 0)
	.fromTo($('.hiw-1 .dot:nth-child(2)'), 0.5, { scale: 0 }, { scale: 0.4, ease: Bounce.easeIn }, 'moveY')
	.to($('.hiw-1 .dot:nth-child(2)'), 0.5, { opacity: 1, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-1 .dot:nth-child(2)'), 3, { y: -70, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-1 .dot:nth-child(2)'), 0.2, { opacity: 0, delay: 2, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-1 .dot:nth-child(2) img'), 1, { x: 0, ease: Power1.easeInOut }, 0)
	.to($('.hiw-1 .dot:nth-child(2) img'), 1.5, { x: 3, ease: Power1.easeInOut }, 1)

var hiw1Bubble3 = new TimelineMax({
	repeat: 0,
	paused: true
})

hiw1Bubble3
	.add('moveY', 0)
	.fromTo($('.hiw-1 .dot:nth-child(3)'), 0.5, { scale: 0 }, { scale: 0.7, ease: Bounce.easeIn }, 'moveY')
	.to($('.hiw-1 .dot:nth-child(3)'), 0.5, { opacity: 1, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-1 .dot:nth-child(3)'), 4, { y: -90, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-1 .dot:nth-child(3)'), 0.2, { opacity: 0, delay: 3, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-1 .dot:nth-child(3) img'), 1, { x: 20, ease: Power1.easeInOut }, 0)
	.to($('.hiw-1 .dot:nth-child(3) img'), 1.5, { x: -5, ease: Power1.easeInOut }, 1)

/*
 * >>========================================>
 * How It Works 2
 * >>========================================>
 */

TweenMax.fromTo($('.you-win path'), 0.5, { fill: '#6200EA' }, { fill: '#F32B94', yoyo: true, repeat: -1, ease: Linear.easeNone })

var hiw2 = new TimelineMax({
	repeat: -1,
	repeatDelay: 0
})

function dotsAndBubbles(id) {
	var $parent = $('.hiw-2 .dot-container:eq(' + (id - 1) + ')'),
		hiw2Bubble1 = new TimelineMax({
			repeat: 0
		})

	hiw2Bubble1
		.add('moveY', 0)
		.fromTo($parent.find('.dot:nth-child(1)'), 4, { scale: 0 }, { scale: 1.5, ease: Linear.easeNone }, 'moveY')
		.to($parent.find('.dot:nth-child(1)'), 0.5, { opacity: 1, ease: Linear.easeNone }, 'moveY')
		.fromTo($parent.find('.dot:nth-child(1)'), 8, { y: 0 }, { y: -100, ease: Linear.easeNone }, 'moveY')
		.to($parent.find('.dot:nth-child(1)'), 0.2, { opacity: 0, delay: 3.5, ease: Linear.easeNone }, 'moveY')
		.to($parent.find('.dot:nth-child(1) img'), 1, { x: 5, ease: Power2.easeInOut }, 0)
		.to($parent.find('.dot:nth-child(1) img'), 3, { x: -10, ease: Power2.easeInOut }, 1)

	var hiw2Bubble2 = new TimelineMax({
		repeat: 0
	})

	hiw2Bubble2
		.add('moveY', 0)
		.fromTo($parent.find('.dot:nth-child(2)'), 0.5, { scale: 0 }, { scale: 0.4, ease: Bounce.easeIn }, 'moveY')
		.to($parent.find('.dot:nth-child(2)'), 0.5, { opacity: 1, ease: Linear.easeNone }, 'moveY')
		.fromTo($parent.find('.dot:nth-child(2)'), 3, { y: 0 }, { y: -70, ease: Linear.easeNone }, 'moveY')
		.to($parent.find('.dot:nth-child(2)'), 0.2, { opacity: 0, delay: 2, ease: Linear.easeNone }, 'moveY')
		.to($parent.find('.dot:nth-child(2) img'), 1, { x: 0, ease: Power1.easeInOut }, 0)
		.to($parent.find('.dot:nth-child(2) img'), 1.5, { x: 3, ease: Power1.easeInOut }, 1)

	var hiw2Bubble3 = new TimelineMax({
		repeat: 0
	})

	hiw2Bubble3
		.add('moveY', 0)
		.fromTo($parent.find('.dot:nth-child(3)'), 0.5, { scale: 0 }, { scale: 0.7, ease: Bounce.easeIn }, 'moveY')
		.to($parent.find('.dot:nth-child(3)'), 0.5, { opacity: 1, ease: Linear.easeNone }, 'moveY')
		.fromTo($parent.find('.dot:nth-child(3)'), 4, { y: 0 }, { y: -90, ease: Linear.easeNone }, 'moveY')
		.to($parent.find('.dot:nth-child(3)'), 0.2, { opacity: 0, delay: 3, ease: Linear.easeNone }, 'moveY')
		.to($parent.find('.dot:nth-child(3) img'), 1, { x: -20, ease: Power1.easeInOut }, 0)
		.to($parent.find('.dot:nth-child(3) img'), 1.5, { x: 5, ease: Power1.easeInOut }, 1)

	var hiw2Star = new TimelineMax({
		repeat: 0
	})

	hiw2Star
		.to($parent.find('.star-three'), 0.3, { opacity: 1, ease: Linear.easeNone }, 'moveY')
		.fromTo($parent.find('.star-three'), 4, { y: 0 }, { y: -120, ease: Linear.easeNone }, 'moveY')
		.fromTo($parent.find('.star-three'), 4, { rotation: 0 }, { rotation: 360, ease: Linear.easeNone }, 'moveY')
		.to($parent.find('.star-three'), 0.2, { opacity: 0, ease: Linear.easeNone }, '-=1')
}

/*
 * >>========================================>
 * How It Works 3
 * >>========================================>
 */

var hiw3Star1 = new TimelineMax({
	repeat: -1
})

hiw3Star1
	.to($('.hiw-3 .star-one'), 0.3, { opacity: 1, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-3 .star-one'), 4, { y: -200, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-3 .star-one'), 4, { rotation: -360, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-3 .star-one'), 0.2, { opacity: 0, ease: Linear.easeNone }, '-=1')

var hiw3Star2 = new TimelineMax({
	repeat: -1
})

hiw3Star2
	.to($('.hiw-3 .star-two'), 0.3, { opacity: 1, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-3 .star-two'), 6, { y: -140, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-3 .star-two'), 6, { rotation: 360, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-3 .star-two'), 0.2, { opacity: 0, ease: Linear.easeNone }, '-=1')

var hiw3Star3 = new TimelineMax({
	repeat: -1
})

hiw3Star3
	.to($('.hiw-3 .star-three'), 0.3, { opacity: 1, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-3 .star-three'), 10, { y: -210, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-3 .star-three'), 10, { rotation: 360, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-3 .star-three'), 0.2, { opacity: 0, ease: Linear.easeNone }, '-=1')

var hiw3Bubble1 = new TimelineMax({
	repeat: -1
})

hiw3Bubble1
	.add('moveY', 0)
	.to($('.hiw-3 .dots .dot:nth-child(1)'), 4, { scale: 1.5, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-3 .dots .dot:nth-child(1)'), 0.5, { opacity: 1, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-3 .dots .dot:nth-child(1)'), 8, { y: -100, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-3 .dots .dot:nth-child(1)'), 0.2, { opacity: 0, delay: 3.5, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-3 .dots .dot:nth-child(1) img'), 1, { x: 5, ease: Power2.easeInOut }, 0)
	.to($('.hiw-3 .dots .dot:nth-child(1) img'), 3, { x: -10, ease: Power2.easeInOut }, 1)

var hiw3Bubble2 = new TimelineMax({
	repeat: -1,
	delay: 3
})

hiw3Bubble2
	.add('moveY', 0)
	.fromTo($('.hiw-3 .dots .dot:nth-child(2)'), 0.5, { scale: 0 }, { scale: 0.4, ease: Power1.easeOut }, 'moveY')
	.to($('.hiw-3 .dots .dot:nth-child(2)'), 0.5, { opacity: 1, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-3 .dots .dot:nth-child(2)'), 3, { y: -70, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-3 .dots .dot:nth-child(2)'), 0.2, { opacity: 0, delay: 2, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-3 .dots .dot:nth-child(2) img'), 1, { x: 0, ease: Power1.easeInOut }, 0)
	.to($('.hiw-3 .dots .dot:nth-child(2) img'), 1.5, { x: 3, ease: Power1.easeInOut }, 1)

var hiw3Bubble3 = new TimelineMax({
	repeat: -1,
	delay: 2
})

hiw3Bubble3
	.add('moveY', 0)
	.fromTo($('.hiw-3 .dots .dot:nth-child(3)'), 0.5, { scale: 0 }, { scale: 0.7, ease: Power1.easeOut }, 'moveY')
	.to($('.hiw-3 .dots .dot:nth-child(3)'), 0.5, { opacity: 1, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-3 .dots .dot:nth-child(3)'), 4, { y: -100, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-3 .dots .dot:nth-child(3)'), 0.2, { opacity: 0, delay: 3, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-3 .dots .dot:nth-child(3) img'), 1, { x: -20, ease: Power1.easeInOut }, 0)
	.to($('.hiw-3 .dots .dot:nth-child(3) img'), 1.5, { x: 5, ease: Power1.easeInOut }, 1)

var hiw3Bubble4 = new TimelineMax({
	repeat: -1,
	delay: 5
})

hiw3Bubble4
	.add('moveY', 0)
	.fromTo($('.hiw-3 .dots .dot:nth-child(4)'), 0.5, { scale: 0 }, { scale: 0.7, ease: Power1.easeOut }, 'moveY')
	.to($('.hiw-3 .dots .dot:nth-child(4)'), 0.5, { opacity: 1, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-3 .dots .dot:nth-child(4)'), 4, { y: -100, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-3 .dots .dot:nth-child(4)'), 0.2, { opacity: 0, delay: 3, ease: Linear.easeNone }, 'moveY')
	.to($('.hiw-3 .dots .dot:nth-child(4) img'), 1, { x: -20, ease: Power1.easeInOut }, 0)
	.to($('.hiw-3 .dots .dot:nth-child(4) img'), 1.5, { x: 5, ease: Power1.easeInOut }, 1)

var flaghiw0 = true
var flaghiw1 = true
var flaghiw2 = true
var flaghiw3 = true
var flagfeature = true
var flaggrid = true
var flagsub = true
$(window).on('load', function() {
	animations()
	$(window).on('scroll', function(event) {
		animations()
	})
})

function animations() {
	if ($('.how-it-works .item1').visible(true) && flaghiw0) {
		flaghiw0 = false
		$('.how-it-works .item1').addClass('view')

		hiw0.add(function() {
			hiw0Bubble1.play(0)
		}, '1.8')
			.add(function() {
				hiw0Bubble2.play(0)
			}, '1.8')
			.add(function() {
				hiw0Bubble3.play(0)
			}, '2.1')
			.add(function() {
				hiw0Bubble4.play(0)
			}, '1.5')
	}
	if ($('.how-it-works .item2').visible(true) && flaghiw1) {
		flaghiw1 = false

		hiw1.set($('.hiw-1 .text img'), { opacity: 1 })
			.fromTo($('.hiw-1 .text img'), 1, { x: 120 }, { x: 0, ease: Power1.easeOut })
			.add('checkIn', 2)
			.add(function() {
				hiw1Bubble1.play(0)
			}, '1.8')
			.add(function() {
				hiw1Bubble2.play(0)
			}, '1.8')
			.add(function() {
				hiw1Bubble3.play(0)
			}, '2.1')
			.to($('.hiw-1 .correct'), 0.3, { opacity: 1, ease: Power1.easeOut }, 'checkIn')
			.to($('.hiw-1 .check'), 0.3, { scale: 1, ease: Power1.easeOut }, 'checkIn')
			.to($('.hiw-1 .letter-a path'), 0.3, { fill: 'rgb(255,255,255)', ease: Power1.easeOut }, 'checkIn')
			.add('reset', 5)
			.to($('.hiw-1 .text img'), 0.3, { opacity: 0, ease: Power1.easeOut }, 'reset')
			.to($('.hiw-1 .correct'), 0.3, { opacity: 0, ease: Power1.easeOut }, 'reset')
			.to($('.hiw-1 .check'), 0.3, { scale: 0, ease: Power1.easeOut }, 'reset')
			.to($('.hiw-1 .letter-a path'), 0.3, { fill: 'rgb(49, 1, 103)', ease: Power1.easeOut }, 'reset')
	}
	if ($('.how-it-works .item3').visible(true) && flaghiw2) {
		flaghiw2 = false

		hiw2.fromTo($('.hiw-2 .streaks .streak:nth-child(1)'), 1, { y: 180 }, { y: 0, ease: Power2.easeOut })
			.fromTo($('.hiw-2 .streaks .streak:nth-child(1) .dot'), 0.5, { scale: 0 }, { scale: 1, ease: Power2.easeOut }, '-=.2')
			.fromTo($('.hiw-2 .streaks .streak:nth-child(2)'), 1, { y: 180 }, { y: 0, ease: Power2.easeOut }, '-=1')
			.fromTo($('.hiw-2 .streaks .streak:nth-child(2) .dot'), 0.5, { scale: 0 }, { scale: 1, ease: Power2.easeOut }, '-=.2')
			.fromTo($('.hiw-2 .streaks .streak:nth-child(3)'), 1, { y: 180 }, { y: 0, ease: Power2.easeOut }, '-=1')
			.fromTo($('.hiw-2 .streaks .streak:nth-child(3) .dot'), 0.5, { scale: 0 }, { scale: 1, ease: Power2.easeOut }, '-=.2')
			.fromTo($('.hiw-2 .streaks .streak:nth-child(4)'), 1, { y: 180 }, { y: 0, ease: Power2.easeOut }, '-=1')
			.fromTo($('.hiw-2 .streaks .streak:nth-child(4) .dot'), 0.5, { scale: 0 }, { scale: 1, ease: Power2.easeOut }, '-=.2')
			.fromTo($('.hiw-2 .streaks .streak'), 1, { opacity: 1 }, { opacity: 0, delay: 3, ease: Power2.easeOut })
			.add(function() {
				dotsAndBubbles(1)
			}, '1')
			.add(function() {
				dotsAndBubbles(2)
			}, '1.3')
			.add(function() {
				dotsAndBubbles(3)
			}, '1.5')
			.add(function() {
				dotsAndBubbles(4)
			}, '1.7')
	}
	if ($('.how-it-works .item4').visible(true) && flaghiw3) {
		flaghiw3 = false
	}
	if ($('.featured-contests .header').visible(true) && flagfeature) {
		flagfeature = false
		weGoingStreakingFeatures1()
		weGoingStreakingFeatures2()
		weGoingStreakingFeatures3()
	}
	if ($('.main-footer .subtitle').visible(true) && flagsub) {
		flagsub = false
		TweenMax.fromTo($('.main-footer .subtitle'), 1, { color: '#FFFFFF' }, { color: '#f32b94', yoyo: true, repeat: -1, ease: Linear.easeNone })
	}

	if ($('.main-footer .grid').visible(true) && flaggrid) {
		flaggrid = false
		gridFooter()
	}
}
