<div class="container">
        <div class="minion">
            <ul class="hair back">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div class="minion-body">
                <div class="dungarees-bottom dungaree"></div>
                <div class="dungarees-front dungaree"></div>
                <div class="dungarees-pocket dungaree">
                    <div class="logo"><span></span></div>
                </div>
                <div class="dungarees-strap left dungaree">
                    <div class="button"></div>
                </div>
                <div class="dungarees-strap right dungaree">
                    <div class="button"></div>
                </div>
            </div>
            <ul class="hair front">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div class="goggle-strap left left-goggle"></div>
            <div class="goggle-strap right right-goggle"></div>
            <div class="goggle-strap-link left left-goggle"></div>
            <div class="goggle-strap-link right right-goggle"></div>
            <div class="goggle-frame left left-goggle">
                <div class="goggle">
                    <div class="eye">
                        <div class="pupil" id="left-pupil">
                            <div class="dot"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="goggle-frame right right-goggle">
                <div class="goggle">
                    <div class="eye">
                        <div class="pupil" id="right-pupil">
                            <div class="dot"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="goggle-shadow left"></div>
            <div class="goggle-shadow right"></div>
            <div class="mouth"></div>
            <div class="arm-shadow left left-hand"></div>
            <div class="arm-shadow right right-hand"></div>
            <div class="arm left left-hand"></div>
            <div class="arm right right-hand"></div>
            <div class="glove left left-hand">
                <div class="finger"></div>
            </div>
            <div class="glove right right-hand">
                <div class="finger"></div>
            </div>
            <div class="wrist front left left-hand"></div>
            <div class="wrist front right right-hand"></div>
            <div class="wrist back left left-hand"></div>
            <div class="wrist back right right-hand"></div>
            <div class="leg left left-leg"></div>
            <div class="leg right right-leg"></div>
            <div class="shoe left left-shoe"></div>
            <div class="shoe right right-shoe"></div>
            <div class="shadow"></div>
        </div>
    </div>
:before, :after {
	content: "";
	position: absolute;
}
html, body{
	overflow: hidden;
}
.container {
	max-width: 550px;
	padding: 0;
	margin: 0 auto;
	min-height: 450px;
	display: inline;
	perspective: 800px;
	perspective-origin: 50% 50%;
}

$minion-skin-color: #FFCB4F;
$minion-highlight: #FFEEA6;
$minion-shadow: #F7CA5C;

$dungarees-color: #6D9CC6;
$dungarees-stitching: #FF862E;
$dungarees-border: darken($dungarees-color, 10%);

$minion-width: 140px;
$minion-height: 250px;

.minion {
	visibility: hidden;
	position: absolute;
	top: calc(48% - (#{$minion-height} / 2));
	left: calc(50% - (#{$minion-width} / 2));
	height: $minion-height;
	width: $minion-width;
	
	* {
		position: absolute;
	}

	$hair-color: #333333;

	.hair  {
		top: -15px;
		margin: 0;
		padding: 0;

		&.back {

			li:nth-of-type(1) {
				transform: rotate(-70deg);
				margin-top: 36px;
			}

			li:nth-of-type(2) {
				transform: rotate(-50deg);
				margin-top: 19px;
			}

			li:nth-of-type(3) {
				transform: rotate(-30deg);
				margin-top: 12px;
			}

			li:nth-of-type(4) {
				transform: rotate(-10deg);
				margin-top: 3px;
			}

			li:nth-of-type(5) {
				transform: rotate(2deg);
				border-left: 1px solid $hair-color;
				border-radius: 80% 0 0 0;
			}

			li:nth-of-type(6) {
				transform: rotate(10deg);
				margin-top: 3px;
			}

			li:nth-of-type(7) {
				transform: rotate(30deg);
				margin-top: 12px;
			}

			li:nth-of-type(8) {
				transform: rotate(50deg);
				margin-top: 19px;
			}

			li:nth-of-type(9) {
				transform: rotate(70deg);
				margin-top: 36px;
			}
		}

		&.front {
			margin-top: 3px;
			z-index: 4;

			li:nth-of-type(1) {
				transform: rotate(-60deg);
				margin-top: 21px;
			}

			li:nth-of-type(2) {
				transform: rotate(-46deg);
				margin-top: 12px;
			}

			li:nth-of-type(3) {
				transform: rotate(-28deg);
				margin-top: 7px;
			}

			li:nth-of-type(4) {
				transform: rotate(-12deg);
				margin-top: 5px;
			}

			li:nth-of-type(5) {
				transform: rotate(-2deg);
				border-right: 1px solid $hair-color;
				border-radius: 0 80% 0 0;
				margin-top: 3px;
			}

			li:nth-of-type(6) {
				transform: rotate(12deg);
				margin-top: 6px;
			}

			li:nth-of-type(7) {
				transform: rotate(28deg);
				margin-top: 7px;
			}

			li:nth-of-type(8) {
				transform: rotate(46deg);
				margin-top: 12px;
			}

			li:nth-of-type(9) {
				transform: rotate(60deg);
				margin-top: 21px;
			}
		}

		li {
			list-style: none;
			height: 30px;
			width: 10px;
			float: left;

			&:nth-of-type(1) {
				transform: rotate(-70deg);
				position: absolute;
				left: 8px;
				height: 30px;
			}

			&:nth-of-type(2) {
				transform: rotate(-50deg);
				left: 18px;
			}

			&:nth-of-type(3) {
				transform: rotate(-30deg);
				left: 30px;
			}

			&:nth-of-type(4) {
				transform: rotate(-10deg);
				left: 45px;
			}

			&:nth-of-type(5) {
				left: 60px;
			}

			&:nth-of-type(6) {
				transform: rotate(10deg);
				left: 76px;
			}

			&:nth-of-type(7) {
				transform: rotate(30deg);
				left: 93px;
			}

			&:nth-of-type(8) {
				transform: rotate(50deg);
				left: 107px;
			}

			&:nth-of-type(9) {
				transform: rotate(70deg);
				left: 119px;
				height: 30px;
			}

			&:nth-of-type(n+6) {
				border-left: 1px solid $hair-color;
				border-radius: 80% 0 0 0;
			}

			&:nth-of-type(-n+4) {
				border-right: 1px solid $hair-color;
				border-radius: 0 80% 0 0;
			}
		}
	}

	.minion-body {
		position: relative;
		height: $minion-height;
		width: $minion-width;
		border-radius: 80px 80px 50px 50px;
		background: $minion-skin-color;
		overflow: hidden;
		.dungaree {
			visibility: hidden;
		}
		
		&:after, &:before {
			top: 0;
			left: 0;
		}

		&:before {
			width: 80%;
			height: 100%;
			border-radius: 20px;
			background-image: radial-gradient(rgba(250,250,250,0.6) 0%,rgba(250,250,250,0) 60%);
			filter: blur(5px);
			z-index: 1;
			left: -10px;
		}
		
		&:after {
			height: $minion-height;
			width: $minion-width;
			border-radius: 80px 80px 50px 50px;
			background-image: linear-gradient(left,  rgba(0,0,0,0) 70%,rgba(0,0,0,0.2) 100%);
			filter: blur(5px);
			z-index: 1;
		}

		.dungarees-front {
			bottom: 0;
			height: 90px;
			width: $minion-width;
			overflow: hidden;
			border-top: 1px solid $dungarees-border;

			$dungarees-front-position: -30px;
			
			&:before {
				left: $dungarees-front-position;
				border-radius: 0 0 35% 0;
				box-shadow: 40px -40px 30px 40px $dungarees-color;
			}
			
			&:after {
				right: $dungarees-front-position;
				box-shadow: -40px -40px 30px 40px $dungarees-color;
				border-radius: 0 0 0 35%;
			}

			&:before,
			&:after {
				width: 56px;
				height: 75%;
				top: 0;
				border: 1px solid $dungarees-border;
			}
		}
		
		$pocket-width: 35px;
		$pocket-height: 35px;
		
		.dungarees-pocket {
			bottom: 35px;
			left: 50%;
			margin-left: -($pocket-width / 2);
			height: 35px;
			width: $pocket-width;
			border-radius: 0 0 15px 15px;
			border-left: 1px solid $dungarees-border;
			border-right: 1px solid $dungarees-border;
			border-bottom: 1px solid $dungarees-border;
			
			&:before /*pocket border-top */ {
				top: -13px;
				left: -2px;
				height: 15px;
				width: $pocket-height + 2px;
				border-bottom: 1px solid $dungarees-border;
				border-left: 1px solid transparent;
				border-right: 1px solid transparent;
				border-radius: 20px;
			}
			
			$logo-size: 25px;
			
			.logo {
				top: 50%;
				left: 50%;
				margin-left: -($logo-size / 2);
				margin-top: -($logo-size / 2) + 2px;
				height: $logo-size;
				width: $logo-size;
				background: #333333;
				border-radius: 50%;
				
				$g-width: $logo-size - 10px;
				
				&:before {
					top: 50%;
					left: 50%;
					margin-left: -($g-width / 2);
					margin-top: -($g-width / 2);
					height: $g-width;
					width: $g-width;
					background: $dungarees-color;
					transform: rotate(45deg);
				}
				
				$g-center-width: $g-width - 8px;
				
				&:after {
					top: 50%;
					left: 50%;
					margin-left: -($g-center-width / 2);
					margin-top: -($g-center-width / 2);
					height: $g-center-width;
					width: $g-center-width;
					background: #333333;
					border-radius: 50%;
					z-index: 5;
				}
				
				span {
					height: 2px;
					background: #333333;
					border-bottom: 1px solid $dungarees-color;
					width: $logo-size / 2;
					right: 0;
					top: 48%;
					margin-top: -1px;
					z-index: 6;
				}
			}
		}

		.dungarees-bottom {
			bottom: 0;
			height: 40px;
			width: $minion-width;
			background-color: rgb(109,156,198);
			background-image: linear-gradient(top, rgba(109,156,198,1) 45%,rgba(75,101,135,1) 100%);
			border-top: 1px solid $dungarees-border;
		}

		$strap-width: 12px;

		.dungarees-strap {
			top: 127px;
			height: 60px;
			width: $strap-width;
			background: $dungarees-color;
			border: 1px solid $dungarees-border;

			$strap-rotate: 65deg;
			$strap-position: 5px;

			&.left {
				left: $strap-position;
				transform: rotate(-$strap-rotate);
			}

			&.right {
				right: $strap-position;
				transform: rotate($strap-rotate);
			}

			$button-position: 2px;

			.button {
				bottom: 0;
				left: $button-position;
				height: $strap-width - ($button-position * 2);
				width: $strap-width - ($button-position * 2);
				border-radius: 50%;
				background: #333333;
			}
		}
	}

	$goggle-strap-width: 16px;
	$goggle-strap-position: -2px;
	$goggle-strap-color: #444444;
	$goggle-dark-line: 3px;

	.goggle-strap {
		top: 68px;
		height: $goggle-dark-line;
		background: darken($goggle-strap-color, 90%);
		width: 16px;
		z-index: 6;

		&.left {
			left: $goggle-strap-position;

			&:before, &:after {
				border-right: $goggle-strap-width solid $goggle-strap-color;
			}
		}

		&.right {
			right: $goggle-strap-position;
			
			&:before, &:after {
				border-left: $goggle-strap-width solid $goggle-strap-color;
			}
		}
		
		&:before,
		&:after {
			height: 6px;
		}
		
		&:before {
			top: -7px;
			border-top: 2px solid transparent;
		}

		&:after {
			top: $goggle-dark-line;
			border-bottom: 2px solid transparent;
		}
	}
	
	.goggle-strap-link {
		top: 58px;
		height: 25px;
		width: 5px;
		background: #999999;
		z-index: 7;
		
		$strap-link-position: 12px;
		
		&.left {
			left: $strap-link-position;
		}
		
		&.right {
			right: $strap-link-position;
		}
	}

	$goggle-size: 50px;
	$goggle-border: 5px;

	.goggle-frame {
		top: 40px;
		height: $goggle-size;
		width: $goggle-size;
		border: $goggle-border solid #CCCCCC;
		border-radius: 50%;
		overflow: hidden;
		z-index: 8;

		$eye-position: 30%;
		$pupil-position: 40%;

		&.left {
			left: $eye-position;
			margin-left: -(($goggle-size + ($goggle-border * 2)) / 2);
			
			.goggle {
				left: -1px;

				.pupil {
					right: $pupil-position;
				}
			}
		}

		&.right {
			right: $eye-position;
			margin-right: -(($goggle-size + ($goggle-border * 2)) / 2);

			.goggle {
				right: -1px;

				.pupil {
					left: $pupil-position;
				}
			}
		}

		$goggle-border: 3px;

		.goggle {
			height: $goggle-size;
			width: $goggle-size;
			border: $goggle-border solid #666666;
			border-radius: 50%;

			$eyelid-height: 1px;
			$eye-height: $goggle-size - $eyelid-height - $goggle-border;

			$eye-shadow-top: inset 0px 2px 10px 0px rgba(#333333,0.5);
			$eye-shadow-bottom: inset 0px -1px 5px 0px rgba(#333333,0.3);

			.eye {
				background: whitesmoke;
				height: $eye-height;
				width: $goggle-size;
				border-radius: 50%;
				margin: $eyelid-height 0;
				box-shadow: $eye-shadow-top, $eye-shadow-bottom;

				$eye-pupil-size: 15px;

				.pupil {
					top: 30%;
					// margin: -($eye-pupil-size / 2);
					height: $eye-pupil-size;
					width: $eye-pupil-size;
					background-color: #e7a452;
					background-image: radial-gradient(#e7a452 0%,#91695c 49%,#91695c 74%,#000000 99%);
					border-radius: 50%;

					$dot-size: 5px;

					.dot {
						top: 50%;
						left: 50%;
						margin-top: -($dot-size / 2);
						margin-left: -($dot-size / 2);
						height: $dot-size;
						width: $dot-size;
						background: #333333;
						border-radius: 50%;
					}
				}
			}
		}
	}
	
	.goggle-shadow {
		height: $goggle-size * 1.5;
		top: 45px;
		border-radius: 50%;
		background-image: radial-gradient(rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 50%);
		z-index: 5;
		
		$goggle-shadow-position: -5px;
		
		&.left {
			left: $goggle-shadow-position;
			width: $goggle-size * 2.6;
		}
		
		&.right {
			left: $goggle-shadow-position + $goggle-size;
			width: $goggle-size * 2;
		}
	}

	$mouth-width: 60px;

	.mouth {
		top: 110px;
		left: 50%;
		margin-left: -($mouth-width / 2);
		height: 20px;
		width: $mouth-width;
		border-bottom: 2px solid #DE9A33;
		border-right: 1px solid tranparent;
		border-left: 1px solid tranparent;
		border-radius: 70%;
		z-index: 5;
		box-shadow: inset 0 -1px 2px -1px rgba(0,0,0,0.3);
	}
	
	$arm-width: 12px;

	.arm {
		top: 160px;
		height: 80px;
		width: $arm-width;
		z-index: -1;
		background: $minion-skin-color;
		overflow: hidden;

		$arm-position: -$arm-width;
		$arm-rotate: 0deg;

		&.left {
			left: $arm-position;
			border-radius: 20px 0 0 20px / 80px 0 0 20px;
			transform: rotate($arm-rotate);
			
			&:before {
				background-image: linear-gradient(left,  rgba(250,250,250,0.3) 20%, rgba(0,0,0,0) 100%);
			}
		}

		&.right {
			right: $arm-position;
			border-radius: 0 20px 20px 0 / 0 80px 20px 0;
			transform: rotate(-$arm-rotate);
			
			&:before {
				background-image: linear-gradient(left,  rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 90%);
			}
		}
		
		&:before {
			height: 100%;
			width: 100%;
			filter-gradient: (#000000, #000000, horizontal);
		}
	}
	
	.arm-shadow {
		top: 180px;
		height: 30px;
		width: 5px;
		border-radius: 50%;

		$arm-shadow-position: 0px;
		$arm-shadow-rotate: 5deg;

		&.left {
			left: $arm-shadow-position;
			box-shadow: inset 2px 0 3px -1px rgba(0,0,0,0.3);
			transform: rotate($arm-shadow-rotate);
		}

		&.right {
			right: $arm-shadow-position;
			box-shadow: inset -2px 0 3px -1px rgba(0,0,0,0.3);
			transform: rotate(-$arm-shadow-rotate);
		}
	}
	
	.glove {
		bottom: 0; 
		width: 17px;
		height: 18px;
		background: #333333;
		border-radius: 0 0 30px 30px;
		
		$glove-position: -14px;
		$glove-rotate: 10deg;
		$finger1-position: -2px;
		$finger1-rotate: 20deg;
		$finger2-position: 13px;
		$finger2-rotate: 30deg;
		$finger3-position: 5px;
		$finger3-rotate: 0deg;
		
		&.left {
			left: $glove-position;
			transform: rotate(-$glove-rotate);
			
			&:before {
				left: $finger1-position;
				transform: rotate($finger1-rotate);
			}
			
			&:after {
				left: $finger2-position;
				transform: rotate(-$finger2-rotate);
			}
			
			.finger {
				left: $finger3-position;
				transform: rotate(-$finger3-rotate);
			}
		}
		
		&.right {
			right: $glove-position;
			transform: rotate($glove-rotate);
			
			&:before {
				right: $finger1-position;
				transform: rotate(-$finger1-rotate);
			}
			
			&:after {
				right: $finger2-position;
				transform: rotate($finger2-rotate);
			}
			
			.finger {
				right: $finger3-position;
				transform: rotate($finger3-rotate);
			}
		}
		
		&:before /* finger1 */ {
			bottom: 0px;
			height: 20px;
			width: 10px;
			background: #333333;
			border-radius: 0 0 20px 20px;
		}
		
		&:after /* finger2 */ {
			bottom: -4px;
			height: 20px;
			width: 10px;
			background: #333333;
			border-radius: 0 0 20px 20px;
		}
		
		.finger {
			bottom: -6px;
			height: 20px;
			width: 10px;
			background: #333333;
			border-radius: 0 0 20px 20px;
			z-index: 10;
		}
	}
		
	.wrist {
		height: 30px;
		width: 16px;
		border-radius: 40%;
		
		&.front {
			bottom: 15px;
			border-bottom: 5px solid #333333;
			border-right: 5px solid transparent;
			border-left: 5px solid transparent;
		}
		
		&.back {
			bottom: -11px;
			border-top: 5px solid #333333;
			border-right: 5px solid transparent;
			border-left: 5px solid transparent;
			z-index: -2;
		}

		$wrist-position: -19px;

		&.left {
			left: $wrist-position;
		}

		&.right {
			right: $wrist-position;
		}
	}
	
	.leg {
		bottom: -15px;
		height: 15px;
		width: 25px;
		background: #4B6587;
		z-index: -1;
		border-left: 1px solid $dungarees-border;
		border-right: 1px solid $dungarees-border;
		
		$leg-position: 40px;
		$leg-rotate: 55deg;
		
		&.left {
			left: $leg-position;
			border-radius: 0 0 10% 20% / 0 0 80% 80%;
			
			&:after {
				transform: rotate($leg-rotate);
				left: -12px;
			}
		}
		
		&.right {
			right: $leg-position;
			border-radius: 0 0 20% 10% / 0 0 80% 80%;
			
			&:after {
				transform: rotate(-$leg-rotate);
				right: -12px;
			}
		}
		
		&:after {
			top: -10px;
			background: #4B6587;
			height: 10px;
			width: 20px;
			border-bottom: 1px solid $dungarees-border;
		}
	}
	
	$shoe-width: 30px;
	$shoe-color: #222222;
	
	.shoe {
		bottom: -26px;
		width: $shoe-width;
		height: 10px;
		background: $shoe-color;
		z-index: -2;
		
		$shoe-position: 74px;
		$shoe-top-position: 0px;
		$shoe-rotate: 3deg;
		
		&.left {
			right: $shoe-position;
			border-radius: 50px 20px 15px 10px;
			transform: rotate(-$shoe-rotate);
			
			&:before {
				right: $shoe-top-position;
			}
			
			&:after {
				right: 0;
				border-radius: 10px 0 0 10px;
			}
		}
		
		&.right {
			left: $shoe-position;
			border-radius: 20px 50px 10px 15px;
			transform: rotate($shoe-rotate);
			
			&:before {
				left: $shoe-top-position;
			}
			
			&:after {
				left: 0;
				border-radius: 0 10px 10px 0;
			}
		}
		
		&:before {
			top: -10px;
			height: 15px;
			width: 22px;
			background: $shoe-color;
		}
		
		&:after {
			bottom: -3px;
			height: 3px;
			width: $shoe-width;
			background-image: linear-gradient(top, #666666 0%, $shoe-color 58%);
		}
	}
	.shadow {
		bottom: -38px;
		left: -15%;
		width: 140%;
		height: 30px;
		background: radial-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
		z-index: -5;
	}
}

.movie-logo {
	position: fixed;
	bottom: 20px;
	left: 20px;
	z-index: 20;
	
	img {
		margin: 0 0 -10px -10px;
		width: 150px;
		height: auto;
	}

	h1, h2 {
		font-family: "helvetica neue", helvetica, arial, sans-serif;
		margin: 0;
		font-size: 26px;
		letter-spacing: 1px;
		color: #666666;
		font-weight: 100;
	}
}
View Compiled
const random = (min, max) => {
    return Math.floor(Math.random()*(max-min) + min);
}
const makeVisible = (target) => {
    var tl = new gsap.timeline();
    tl.to(target, {
        visibility: 'visible'
    });
    return tl;
}
const displayBody = () => {
    var tl = new gsap.timeline();
    tl.to('.minion', {
        visibility: 'hidden'
    });
    tl.fromTo('.minion-body', {
        visibility: 'visible',
        x: random(-300, 300),
        y: random(-100, 0),
        scale: 0.3,
        rotateZ: random(0, 360),
    }, {
        rotateZ: 0,
        x: 0,
        y: 0,
        scale: 1,
        duration: 0.6,
        ease: 'bounce'
    }, '0');
    return tl;
}
const bringGoggle = (target, to) => {
    var tl = makeVisible(target);
    tl.from(target, {
        x: to,
        duration: 0.3,
    }, '0')
    tl.to('.pupil', {
        visibility: 'hidden'
    }, '0')
    return tl;
}
const goggle = () => {
    var tl = new gsap.timeline();
    tl.add(bringGoggle('.right-goggle', 700)).add(bringGoggle('.left-goggle', -700), '0');
    return tl;
}
const moveEyes = (x) => {
    return gsap.to('.pupil', {
        x: x
    })
}
const jump = () => {
    return gsap.to('.minion', {
        transformOrigin: 'center',
        y: -50,
        yoyo: true,
        repeat: 1,
        ease: 'bounce.out'
    })
}
const displayDungaree = () => {
    var tl = makeVisible('.dungaree');
    tl.fromTo('.dungaree', {
        opacity: 0
    }, {
        opacity: 1,
        ease: 'sine',
        duration: 0.5
    }, '0');
    return tl;
}
const displayLegs = () => {
    var tl = makeVisible('.leg, .shoe');
    tl.fromTo('.leg, .shoe', {
        scale: 0.4,
    }, {
        scale: 1,
        duration: 0.5,
        ease: 'elastic'
    }, '0');
    return tl;
}
const displayHand = (target) => {
    var tl = makeVisible(target);
    tl.fromTo(target, {
        opacity: 0,
        scale: 0.3,
    }, {
        opacity: 1,
        scale: 1,
        ease: 'bounce.in',
        duration: 0.3,
    }, '0');
    return tl;
}
const displayMouth = () => {
    var tl = makeVisible('.mouth');
    tl.fromTo('.mouth', {
        visibility: 'visible',
        opacity: 0,
        scale: 0.2,
    }, {
        opacity: 1,
        scale: 1,
        duration: 0.5
    }, '0');
    return tl;
}
const displayHair = () => {
    var tl = makeVisible('.hair');
    tl.fromTo('.hair', {
        opacity: 0,
        scaleY: 0.8,
    }, {
        opacity: 1,
        scaleY: 1,
        duration: 0.5
    }, '0');
    return tl;
}
const displayEyes = () => {
    var tl = makeVisible('.pupil');
    tl.fromTo('.pupil', {
        visibility: 'visible',
        scale: 0
    }, {
        scale: 1,
        duration: 0.4,
        ease: 'elastic'
    }, '0');
    return tl;
}
const blinkEyes = () => {
    var tl = new gsap.timeline();
    tl.to('.pupil', {
        scale: 0.1,
        duration: 0.3
    });
    tl.to('.pupil', {
        scale: 1,
        duration: 0.3
    });
    return tl;
}
const displayGoggleShadow = () => {
    var tl = makeVisible('.goggle-shadow')
    tl.fromTo('.goggle-shadow', {
        opacity: 0.5,
    }, {
        opacity: 1,
        duration: 0.4
    }, '0');
    return tl;
}
const displayShadow = () => {
    var tl = makeVisible('.shadow')
    tl.fromTo('.shadow', {
        scale: 1
    }, {
        scale: 0.4,
        repeat: 1,
        yoyo: true,
        duration: 0.5
    }, '0');
    return tl;
}
var master = new gsap.timeline({repeat: -1, repeatDelay: 0.3})
master.add('checkpoint-1')
master.add(displayBody(), 'checkpoint-1')
master.add(goggle(), 'checkpoint-1+=0.2')
master.add('checkpoint-2')
master.add(displayGoggleShadow(), 'checkpoint-2-=0.3');
master.add(displayDungaree()).add(displayEyes()).add(moveEyes(-10)).add(displayHand('.left-hand'));
master.add(moveEyes(10)).add(displayHand('.right-hand')).add(moveEyes(0))
master.add('checkpoint-3')
master.add(jump()).add(displayLegs()).add(displayShadow(), 'checkpoint-3');
master.add(displayMouth(), 'checkpoint-3+=0.8').add(displayHair(), 'checkpoint-3+=0.8');
master.add(blinkEyes())

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js