Greensock tests

Developer
Carlin Scuderi
Size
2,382 Kb
Views
44,528
  1. Greensock tests Previews
  2. Greensock tests HTML Codes
  3. Greensock tests CSS Codes
  4. Greensock tests JS Codes

How do I make an greensock tests?

Trying out Greensock for some basic animation.. What is a greensock tests? How do you make a greensock tests? This script and codes were developed by Carlin Scuderi on 12 August 2022, Friday.

Greensock tests Previews
IQ Test

Greensock tests - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Greensock tests</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section>	<h1>Sock it to me</h1>	<div class="control">	<button id="play">Play</button>	<button id="pause">Pause</button>	<button id="reverse">Reverse</button>	<button id="restart">Restart</button>	</div>	<h2>Test 1: Straight fade</h2>	<div id="one" class="elem"></div>	<h2>Test 2: Move, with ease</h2>	<div id="two" class="elem"></div>	<h2>Test 3: Move and fade</h2>	<div id="three" class="elem"></div>	<h2>Test 4: Levitate</h2>	<div id="four" class="elem"></div>
</section> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Greensock tests - Script Codes CSS Codes

body {	color: #444;	background: rgba(76, 175, 80, 1);	font-family: 'Trebuchet'', Arial, sans-serif;
}
section {	background: white;	border-radius: 5px;	padding: 50px;	width: 600px;	margin: 5vh auto 0 auto;	box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
}
h1 {	margin-top: 0;	margin-bottom: 10px;	color: rgba(76, 175, 80, 1);	font-size: 4rem;	text-align: center;
}
h2 {	color: rgba(46, 125, 50, 1);	margin-top: 50px;
}
.control {	padding: 15px;	text-align: center;	margin: 0;	margin-bottom: 20px;
}
button {	background: transparent;	border: 1px solid rgba(46, 125, 50, 1);	border-radius: 50px;	padding: 10px;	color: rgba(46, 125, 50, 1);
}
.elem {	height: 60px;	width: 60px;	border-radius: 50%;
}
#one {	background-color: blue;
}
#two {	background-color: green;
}
#three {	background-color: red;
}
#four {	background-color: purple;
}

Greensock tests - Script Codes JS Codes

var elem = document.getElementsByClassName('elem');
//One timeline
var tl = new TimelineLite();
tl.pause();
tl.to(elem[0], 1, {	opacity: 0
});
tl.to(elem[1], 1, {	x: 500,	ease: Bounce.easeOut
});
tl.to(elem[2], 1, {	opacity: 0,	x: 500
});
tl.to(elem[3], 1, {	y: -10,	ease: Power4.easeOut
});
tl.to(elem[3], 1.5, {	y: 0,	ease: Power4.easeOut
});
//Button controls
document.getElementById('play').addEventListener('click', function() {	tl.play();
});
document.getElementById('pause').addEventListener('click', function() {	tl.pause();
});
document.getElementById('reverse').addEventListener('click', function() {	tl.reverse();
});
document.getElementById('restart').addEventListener('click', function() {	tl.restart();	tl.pause();
});
Greensock tests - Script Codes
Greensock tests - Script Codes
Home Page Home
Developer Carlin Scuderi
Username carlinscuderi
Uploaded August 12, 2022
Rating 3
Size 2,382 Kb
Views 44,528
Do you need developer help for Greensock tests?

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!

Carlin Scuderi (carlinscuderi) Script Codes
Name
Input form with progress bar
Accessible floating labels
SVG clipping mask test
Simple share buttons, no iframes
Veggie Supreme XL-5 menu
Very simple notification demo
Team Canada World Cup of Hockey
PayPal - Receipt
CSS mixed blending modes playground
Animated radio buttons
Create amazing marketing copy 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!