MOMO BROS

Developer
Pedro Tavares
Size
5,043 Kb
Views
10,120
  1. MOMO BROS Previews
  2. MOMO BROS HTML Codes
  3. MOMO BROS CSS Codes
  4. MOMO BROS JS Codes

How do I make an momo bros?

Original Illustration: Momo - http://heyheymomo.com/ Original animation: LetsBrock - http://letsbrock.co.uk/. What is a momo bros? How do you make a momo bros? This script and codes were developed by Pedro Tavares on 01 December 2022, Thursday.

MOMO BROS Previews
IQ Test

MOMO BROS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>MOMO BROS</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg id="momobros" viewBox="0 0 850 920"> <defs> <style> .cls-1 { fill: none; } .cls-2 { fill: #ff383a; } .cls-3 { fill: #31acff; } .cls-4 { fill: #fcc03a; } .cls-5 { fill: #ef9830; } .cls-6 { fill: #c4123c; } .cls-7 { fill: #111; } .cls-8 { fill: #fff; } .cls-9 { clip-path: url(#clip-path); } .cls-10 { fill: #e0e0e0; } .cls-11 { clip-path: url(#clip-path-2); } .cls-12 { clip-path: url(#clip-path-3); } .cls-13 { fill: #1988db; } .cls-14 { clip-path: url(#clip-path-4); } .cls-15 { clip-path: url(#clip-path-5); }	.cls-16 { stroke: #111; stroke-miterlimit: 10; stroke-width: 20px; }	#blinkR, #blinkL {	visibility: hidden;	} </style> <clipPath id="clip-path"> <path id="_Clipping_Path_" data-name="&lt;Clipping Path&gt;" class="cls-1" d="M141.7,708.7c-70.9,0-70.9-70.9-70.9-70.9V212.6s0-70.9,70.9-70.9H708.6c70.9,0,70.9,70.9,70.9,70.9V637.8s0,70.9-70.9,70.9Z"/> </clipPath> <clipPath id="clip-path-2"> <rect id="_Clipping_Path_2" data-name="&lt;Clipping Path&gt;" class="cls-2" y="496.1" width="850.4" height="283.46"/> </clipPath> <clipPath id="clip-path-3"> <rect id="_Clipping_Path_3" data-name="&lt;Clipping Path&gt;" class="cls-3" y="637.8" width="850.4" height="212.6"/> </clipPath> <clipPath id="clip-path-4"> <circle id="_Clipping_Path_4" data-name="&lt;Clipping Path&gt;" class="cls-4" cx="602.4" cy="637.8" r="53.1"/> </clipPath> <clipPath id="clip-path-5"> <circle id="_Clipping_Path_5" data-name="&lt;Clipping Path&gt;" class="cls-4" cx="389.8" cy="637.8" r="53.1"/> </clipPath> </defs> <title>MOMO BROS</title> <g id="MainLayer">	<rect id="shadow" class="cls-5" x="70.9" y="708.7" width="708.6" height="53.15"/> <g id="momo"> <g id="cap"> <path class="cls-2" d="M212.6,141.7V88.6A88.6,88.6,0,0,1,301.2,0H407.5a88.6,88.6,0,0,1,88.6,88.6v53.1Z"/> <path class="cls-6" d="M301.2,141.7a53.1,53.1,0,0,1,53.1-53.1H513.8a53.1,53.1,0,0,1,53.1,53.1Z"/> </g> <g id="legs"> <path id="legR" class="cls-7" d="M354.3,708.7s0,35.4-35.4,35.4H248c-35.4,0-35.4-35.4-35.4-35.4V637.8H354.3Z"/> <path id="legL" class="cls-7" d="M637.8,708.7s0,35.4-35.4,35.4H531.5c-35.4,0-35.4-35.4-35.4-35.4V637.8H637.8Z"/> </g> <circle id="armL" class="cls-8" cx="779.5" cy="602.4" r="70.9"/> <g id="body"> <g class="cls-9"> <g> <g> <path id="_Path_" data-name="&lt;Path&gt;" class="cls-8" d="M141.7,708.7c-70.9,0-70.9-70.9-70.9-70.9V212.6s0-70.9,70.9-70.9H708.6c70.9,0,70.9,70.9,70.9,70.9V637.8s0,70.9-70.9,70.9Z"/> <rect id="_Clipping_Path_6" data-name="&lt;Clipping Path&gt;" class="cls-10" y="70.9" width="212.6" height="708.65"/> <g> <rect id="_Clipping_Path_7" data-name="&lt;Clipping Path&gt;" class="cls-2" y="496.1" width="850.4" height="283.46"/> <g class="cls-11"> <rect class="cls-6" y="425.2" width="212.6" height="425.19"/> </g> </g> <g> <rect id="_Clipping_Path_8" data-name="&lt;Clipping Path&gt;" class="cls-3" y="637.8" width="850.4" height="212.6"/> <g class="cls-12"> <rect class="cls-13" y="496.1" width="212.6" height="425.19"/> </g> </g> <circle class="cls-7" cx="283.5" cy="141.7" r="70.9"/> <circle class="cls-7" cx="425.2" cy="141.7" r="70.9"/> <circle class="cls-7" cx="566.9" cy="141.7" r="70.9"/> <circle class="cls-7" cx="708.6" cy="141.7" r="70.9"/> <path class="cls-7" d="M212.6,141.7A141.7,141.7,0,0,1,70.9,283.5H35.4V88.6H212.6Z"/> </g> <rect class="cls-3" x="566.9" y="496.1" width="70.9" height="212.6"/> <rect class="cls-3" x="354.3" y="496.1" width="70.9" height="212.6"/> <polygon class="cls-6" points="566.9 566.9 496.1 496.1 425.2 566.9 425.2 496.1 566.9 496.1 566.9 566.9"/> <g> <circle id="_Clipping_Path_9" data-name="&lt;Clipping Path&gt;" class="cls-4" cx="602.4" cy="637.8" r="53.1"/> <g class="cls-14"> <rect class="cls-8" x="602.4" y="549.2" width="88.6" height="194.88"/> </g> </g> <g> <circle id="_Clipping_Path_10" data-name="&lt;Clipping Path&gt;" class="cls-4" cx="389.8" cy="637.8" r="53.1"/> <g class="cls-15"> <rect class="cls-8" x="389.8" y="549.2" width="88.6" height="194.88"/> </g> </g> <path id="_Path_2" data-name="&lt;Path&gt;" class="cls-8" d="M141.7,301.2a53.1,53.1,0,1,0,0,106.3"/> </g> </g> </g> <g id="face"> <g id="eyes">	<g id="blink"> <g id="blinkR"> <path class="cls-16" d="M457.7,283.7a189.3,189.3,0,0,0-71-.5"/> </g> <g id="blinkL"> <path class="cls-16" d="M608.3,283.7a189.3,189.3,0,0,0-71-.5"/> <path class="cls-16" d="M608.3,283.7a189.3,189.3,0,0,0-71-.5"/> </g> </g> <g id="open"> <circle id="openR" class="cls-7" cx="422.2" cy="283.5" r="35.4"/> <circle id="openL" class="cls-7" cx="572.8" cy="283.5" r="35.4"/> </g> </g> <g id="moustache"> <path class="cls-7" d="M389.8,407.5a35.4,35.4,0,1,0,70.9,0,35.4,35.4,0,0,0,70.9,0,35.4,35.4,0,1,0,70.9,0V354.3H389.8Z"/> </g> <path id="nose" class="cls-4" d="M531.5,336.6a35.4,35.4,0,1,0-70.9,0v17.7a35.4,35.4,0,0,0,70.9,0Z"/> <circle id="cheekL" class="cls-10" cx="690.9" cy="354.3" r="53.1"/> <circle id="cheekR" class="cls-10" cx="301.2" cy="354.3" r="53.1"/> </g> <circle id="armR" class="cls-8" cx="70.9" cy="602.4" r="70.9"/> </g> </g>
</svg>
<button>Jump!</button>
<button id="mute">Toggle Sound</button>
<!-- <p class="notice">This Pen plays constant music. You're warned.</p> --> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

MOMO BROS - Script Codes CSS Codes

body { background: #fcc03a;
}
svg { height: 70vh; position: relative; width: auto; margin: auto; display: block; margin-top: 20vh; overflow: visible;
}
button { position: fixed; left: 50%; top: 88vh; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 1vh; font-size: 3em; font-weight: 600; cursor: pointer;
}
#mute { font-size: 1em; left: 5%; -webkit-transform: translate(0, 0); transform: translate(0, 0);
}
.notice { position: fixed; top: 0; left: 0; text-align: center; padding: 1vh; width: 100%; font-size: 1.5em; font-weight: 600; text-transform: uppercase; font-family: Sans-Serif;
}

MOMO BROS - Script Codes JS Codes

var run_tl = new TimelineLite({	onComplete: function() {	run_tl.play(0);	},	}),	jump_tl = new TimelineLite({	paused:true,	onComplete:function() {	run_tl.play(0);	}	}),	dur = 0.125;
TweenLite.defaultEase = Linear.easeNone;
run_tl.timeScale(1.25);
run_tl.add("Step")	.add(bodyTl(), "Step")	.add(armsTl(), "Step")	.add(legRTl(), "Step")	.add(legLTl(), "Step")
// Running Methods
function armsTl() {	var arms_tl = new TimelineLite();	arms_tl.add("Start")	.to(armR, dur * 3, {	x: "150",	ease: Power1.easeInOut	}, "Start")	.to(armL, dur * 2.75, {	x: "-100",	ease: Power1.easeInOut	}, "Start")	.add("Return")	.to(armR, dur * 2.5, {	x: "0",	ease: Power1.easeInOut	}, "Return")	.to(armL, dur * 3, {	x: "0",	ease: Power1.easeInOut	}, "Return")	console.log("Arms TL", arms_tl.totalDuration());	return arms_tl;
}
function bodyTl() {	var body_tl = new TimelineLite();	body_tl.add(bodyBounce())	.add(bodyBounce())	console.log("Body TL", body_tl.totalDuration());	return body_tl;
}
function bodyBounce() {	var tl = new TimelineLite();	tl.add("Up")	.to(momo, dur, {	y: "-50",	ease: Power2.easeInOut	}, "Up")	.to(shadow, dur, {scale: 0.98, opacity: 0.9, transformOrigin: "50% 50%", ease: Power2.easeInOut}, "Up")	.add("Down")	.to(momo, dur, {	y: "0",	ease: Power2.easeIn	}, "Down")	.to(shadow, dur, {	scale: 1,	opacity: 1,	ease: Power2.easeIn	}, "Down")	.to(cap, dur, {	y: "-50",	ease: Power2.easeInOut	}, "Up+=" + dur * 0.8)	.to(cap, dur, {	y: "0",	ease: Power2.easeIn	})	return tl;
}
function legLTl() {	var tl = new TimelineLite();	tl.add("Start").set(legL, {x: "-30",y: "10"})	.to(legL, dur * 2, {	y: "-30",	rotation: "30",	transformOrigin: "50% 0"	})	.to(legL, dur, {	x: 0,	y: 0,	rotation: 0	})	.to(legL, dur, {	x: "80",	y: "10",	rotation: 0	})	.to(legL, dur * 2, {	x: "-30"	})	console.log("LegL:", tl.totalDuration());	return tl;
}
function legRTl() {	var tl = new TimelineLite();	tl	.set(legL, {y:10})	.to(legR, dur, {	y: "10",	x: "80"	})	.to(legR, dur * 2, {	x: "-30"	})	.to(legR, dur * 2, {	y: "-30",	rotation: "30",	transformOrigin: "50% 0"	})	.to(legR, dur, {	x: 0,	y: 0,	rotation: 0	})	console.log("LegR:", tl.totalDuration());	return tl;
}
// Jumping Methods
jump_tl.add("Up")	.to(momo, dur*2, {y:"-300", ease:Power2.easeInOut}, "Up+="+dur*0.3)	.to(shadow, dur*2, {scale:0.6, autoAlpha:0.5, transformOrigin:"50% 50%", ease:Power2.easeInOut}, "Up+="+dur*0.3)	.to(legR, dur, {y:"40", rotation:"20", transformOrigin:"50% 0", ease:Power2.easeInOut}, "Up+="+dur*0.3)	.to(face, dur, {y:"30", ease:Power4.easeInOut}, "Up+="+dur)	.to(armL, dur*2, {y:"-200", x:"50", ease:Power4.easeOut}, "Up")	.to(armR, dur*2, {y:"50", x:"-50", ease:Power4.easeOut}, "Up+="+dur*0.3)	.set([openR,openL], {autoAlpha:0})	.set([blinkR,blinkL], {autoAlpha:1})	.add("Down")	.to(momo, dur*2, {y:"20", ease:Power2.easeIn}, "Down")	.to(shadow, dur*2, {scale:1.01, autoAlpha:1, ease:Power2.easeIn}, "Down")	.staggerTo([legL,legR], dur, {y:"-20", rotation:0, ease:Power2.easeInOut}, 0.1, "Down")	.to(legL, dur, {x:"30", rotation:"-20", transformOrigin:"50% 0", ease:Power2.easeInOut}, "Down+="+dur*0.5)	.to(face, dur, {y:"-30", ease:Power4.easeInOut}, "Down+="+dur)	.to(armL, dur*2, {y:"-400", x:0, ease:Power2.easeIn}, "Down")	.to(armR, dur*2, {y:"-50", x:"-50", ease:Power2.easeInOut}, "Down")	.to(cap, dur*2, {y:"-200", rotation:"-20", ease:Power2.easeIn}, "Down")	.set(legR, {x:0})	.set(legL, {x:"-30"})	.add("Bounce")	.set(legL, {x:0, rotation:0})	.set([openR,openL], {autoAlpha:1})	.set([blinkR,blinkL], {autoAlpha:0})	.to(momo, dur*2, {y:0, ease:Power2.easeOut}, "Bounce")	.to([legL,legR], dur*2, {y:10, ease:Power2.easeOut}, "Bounce")	.to(shadow, dur*2, {scale:1, ease:Power2.easeIn}, "Bounce")	.to([armL,armR,face], dur*2, {y:0, x:0, ease:Back.easeOut}, "Bounce")	.to(cap, dur*4, {y:0, rotation:0, ease:Bounce.easeOut}, "Bounce")
// AUDIO
// Looping Theme
var audio = new Audio('https://s3-us-west-2.amazonaws.com/s.cdpn.io/259155/momoBros.mp3');
audio.loop = true;
// audio.play();
// Jump
var jumpFx = new Audio('https://s3-us-west-2.amazonaws.com/s.cdpn.io/259155/MomoJump.mp3');
var toggle = document.getElementById('mute');
toggle.addEventListener('click', function() {	if(!audio.paused) {	audio.pause();	} else {	audio.play();	}
})
// BUTTON BEHAVIOUR
var btn = document.querySelector('button');
btn.addEventListener('click', function(e) {	if(!jump_tl.isActive()) {	jump_tl.play(0);	jumpFx.play();	run_tl.pause();	}	// if (run_tl.isActive()) {	// } else {	//	run_tl.play();	// }
});
MOMO BROS - Script Codes
MOMO BROS - Script Codes
Home Page Home
Developer Pedro Tavares
Username dipscom
Uploaded December 01, 2022
Rating 4.5
Size 5,043 Kb
Views 10,120
Do you need developer help for MOMO BROS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Pedro Tavares (dipscom) Script Codes
Name
Russian Doll
SVG Grid Mask - With Color effect
Animated SVG Blur
Ghosty McGoat
Mask Within Mask
React TransitionGroup - Fancy
Using Functions to Build a timeline - Broken
Falling tomatoes
SVGText - Pattern Fill
JavaScript Image Loader
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!