Microscope Testtube Animation
How do I make an microscope testtube animation?
What is a microscope testtube animation? How do you make a microscope testtube animation? This script and codes were developed by Kasper on 30 January 2023, Monday.
Microscope Testtube Animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Microscope Testtube Animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="svgimg">
<svg version="1.1" id="Layer_1" class="animation" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 100" enable-background="new 0 0 150 100" xml:space="preserve">
<g id="Microscope"> <circle fill="#333333" cx="83.3" cy="38.1" r="1.7"/> <path fill="#333333" d="M81.5,26.9c-0.3,1.4,0.9,2.6,2.2,2.2c0.6-0.2,1.2-0.7,1.3-1.3c0.3-1.4-0.9-2.6-2.2-2.2 C82.2,25.7,81.7,26.3,81.5,26.9z"/> <rect x="42" y="96.5" fill="#333333" width="65" height="3.5"/> <path fill="none" stroke="#333333" stroke-width="1.4595" stroke-miterlimit="10" d="M85,32.7c0,0,11.8,1.4,12.3,13.3 C98,61.3,86.6,69.6,86.6,69.6l1.2,9.9c15.1-7,16.9-21.2,17.3-28.6c0.8-16.3-10.6-29.3-21.7-29.3"/> <polygon fill="none" stroke="#333333" stroke-miterlimit="10" points="88.8,91.5 86.1,69.5 85.2,69.5 85.2,69.5 46.5,69.5 50.1,76.5 71.5,76.5 65.6,91.5 42.5,91.5 42.5,96.5 106.5,96.5 106.5,91.5 "/> <path fill="#333333" d="M65.2,76.1c0,3.5-2.9,6.4-6.4,6.4s-6.4-2.9-6.4-6.4"/> <circle fill="none" stroke="#333333" stroke-width="1.4595" stroke-miterlimit="10" cx="83.3" cy="38.1" r="5"/> <path fill="none" stroke="#333333" stroke-width="1.4595" stroke-miterlimit="10" d="M93.7,37.3c0,0-4.5,8.1-17.1,5.3"/> <circle fill="#333333" cx="91.3" cy="71.9" r="2.7"/> <path fill="#333333" d="M49.7,69.9L49.7,69.9c-0.7,0-1.3,0.1-1.3-0.4v-1.9c0-0.5,0.6-0.9,1.3-0.9l0,0c0.7,0,1.3,0.4,1.3,0.9v1.9 C51,70,50.4,69.9,49.7,69.9z"/> <path fill="#333333" d="M65.2,69.9L65.2,69.9c-0.7,0-1.3,0.1-1.3-0.4v-1.9c0-0.5,0.6-0.9,1.3-0.9l0,0c0.7,0,1.3,0.4,1.3,0.9v1.9 C66.5,70,65.9,69.9,65.2,69.9z"/> <ellipse transform="matrix(0.8838 0.4679 -0.4679 0.8838 13.4676 -42.845)" fill="none" stroke="#333333" stroke-width="2.9189" stroke-miterlimit="10" cx="93" cy="5.7" rx="4.8" ry="3.6"/> <path fill="#333333" d="M68.2,34.2c0,0,1.5,3.3,7.2,4.5l-1.2,1.8c-0.1,0.2-0.4,0.3-0.6,0.3c-1.1-0.2-4.2-1.1-6.7-3.7 c-0.2-0.2-0.2-0.6-0.1-0.8L68.2,34.2z"/> <path fill="none" stroke="#333333" stroke-width="1.459" stroke-miterlimit="10" d="M86.2,22.4c-0.9-0.5-1.9-0.8-2.9-0.8 c-3.2,0-5.7,2.6-5.7,5.7c0,1.8,0.9,3.5,2.2,4.5c1,0.8,2.2,1.2,3.5,1.2c3.1,0,5.7-2.6,5.7-5.7C88.9,25.2,87.8,23.4,86.2,22.4z"/> <line fill="none" stroke="#333333" stroke-width="1.4595" stroke-miterlimit="10" x1="95.7" y1="8.5" x2="86.2" y2="22.4"/> <line fill="none" stroke="#333333" stroke-width="1.4595" stroke-miterlimit="10" x1="67" y1="36.5" x2="89.2" y2="4.1"/> <line fill="none" stroke="#333333" stroke-width="1.4595" stroke-miterlimit="10" x1="79.7" y1="31.8" x2="73.8" y2="40.4"/> <rect x="50.7" y="42.9" transform="matrix(0.7045 0.7098 -0.7098 0.7045 46.3539 -23.9569)" fill="#333333" width="2.5" height="1.5"/> <rect x="59.6" y="49.8" transform="matrix(0.8513 0.5247 -0.5247 0.8513 35.5613 -24.4348)" fill="#333333" width="2.5" height="1.5"/> <ellipse transform="matrix(0.4951 -0.8689 0.8689 0.4951 -2.3944 79.8227)" fill="none" stroke="#333333" stroke-width="1.459" stroke-miterlimit="10" cx="67.5" cy="42" rx="4.7" ry="15.4"/> <path fill="none" stroke="#333333" stroke-miterlimit="10" d="M54.5,37.7l-2.7,2.6c-0.5,0.5-0.5,1.4,0,1.9l1.6,1.7 c0.5,0.5,1.4,0.5,1.9,0l2.7-2.6"/> <path fill="none" stroke="#333333" stroke-miterlimit="10" d="M62,43.9l-2,3.2c-0.4,0.6-0.2,1.5,0.4,1.9l2,1.2 c0.6,0.4,1.5,0.2,1.9-0.4l2-3.2L62,43.9z"/> <path fill="none" stroke="#333333" stroke-miterlimit="10" d="M71.8,48.8l-1.3,3.5c-0.3,0.7,0.1,1.5,0.8,1.8l2.2,0.8 c0.7,0.3,1.5-0.1,1.8-0.8l1.3-3.5"/> <rect x="70.6" y="54.8" transform="matrix(0.9336 0.3584 -0.3584 0.9336 24.7071 -22.0664)" fill="#333333" width="2.5" height="1.5"/>
</g>
<g id="testtube"> <path fill="#333333" d="M88,12c0,1.5-0.7,3-1.6,3H67.1c-0.9,0-1.6-1.5-1.6-3l0,0c0-1.5,0.7-3,1.6-3h19.2C87.2,9,88,10.5,88,12 L88,12z"/> <path fill="none" stroke="#333333" stroke-width="2.304" stroke-miterlimit="10" d="M85.1,14v73.6c0,5.8-3.7,10.6-8.3,10.6h0 c-4.6,0-8.3-4.7-8.3-10.6V14"/> <ellipse fill="none" stroke="#333333" stroke-width="3.072" stroke-miterlimit="10" cx="72.1" cy="56.3" rx="3.1" ry="0.1"/> <ellipse fill="none" stroke="#333333" stroke-width="3.072" stroke-miterlimit="10" cx="72.1" cy="46.2" rx="3.1" ry="0.1"/> <ellipse fill="none" stroke="#333333" stroke-width="3.072" stroke-miterlimit="10" cx="72.1" cy="35.2" rx="3.1" ry="0.1"/> <ellipse fill="none" stroke="#333333" stroke-width="3.072" stroke-miterlimit="10" cx="72.1" cy="67.3" rx="3.1" ry="0.1"/> <ellipse fill="none" stroke="#333333" stroke-width="3.072" stroke-miterlimit="10" cx="72.1" cy="77.4" rx="3.1" ry="0.1"/>
</g>
</svg>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Microscope Testtube Animation - Script Codes CSS Codes
.svgimg svg { width:300px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%)
}
#testtube { opacity:0;
}
Microscope Testtube Animation - Script Codes JS Codes
var microscope = $('#Microscope'), tube = $('#testtube'), masterTl = new TimelineMax({paused:true}), tubemove = new TimelineMax(), microscopemove = new TimelineMax(), tubewiggle = new TimelineMax({repeat:-1});
microscopemove.fromTo(microscope,1,{x:0},{x:-35,ease:Power1.easeInOut});
tubemove.fromTo(tube,0.5,{x:30,opacity:0,scale:0.3},{x:30,opacity:1,scale:1},'+=0.5');
tubewiggle.fromTo(tube,0.1,{x:28},{x:30}, '+=0.5') .fromTo(tube,0.1,{x:30},{x:28}) .fromTo(tube,0.1,{x:28},{x:30}) .fromTo(tube,0.1,{x:30},{x:28}) .fromTo(tube,0.1,{x:28},{x:30}) .fromTo(tube,0.1,{x:30},{x:28}) .fromTo(tube,0.1,{x:28},{x:30}) .fromTo(tube,0.1,{x:30},{x:28}) .fromTo(tube,0.1,{x:28},{x:30}, '+=0.75') .fromTo(tube,0.1,{x:30},{x:28}) .fromTo(tube,0.1,{x:28},{x:30}) .fromTo(tube,0.1,{x:30},{x:28}) .fromTo(tube,0.1,{x:28},{x:30}) .fromTo(tube,0.1,{x:30},{x:28}) .fromTo(tube,0.1,{x:28},{x:30}) .fromTo(tube,0.1,{x:30},{x:28})
masterTl.add(microscopemove);
masterTl.add(tubemove);
masterTl.add(tubewiggle);
document.querySelector('.svgimg').addEventListener('mouseover',function(){ masterTl.play() masterTl.add(tubewiggle)
})
document.querySelector('.svgimg').addEventListener('mouseleave',function(){ masterTl.remove(tubewiggle).reverse()
})
Developer | Kasper |
Username | kdbkapsere |
Uploaded | January 30, 2023 |
Rating | 3 |
Size | 3,383 Kb |
Views | 10,120 |
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!
Name | Size |
Love 2 rainbow | 3,360 Kb |
Love | 4,092 Kb |
Bootstrap Template | 1,292 Kb |
Ryu Hadouken GSAP Animation | 13,838 Kb |
Slack Loader Animation | 2,991 Kb |
LinkedIn Loader Animation | 2,691 Kb |
A Pen by kasper | 5,021 Kb |
Share Page Animation | 2,363 Kb |
Unknown Pleasures WIP | 18,874 Kb |
Login Form | 2,321 Kb |
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!
Name | Username | Size |
A Pen by Alex Bergin | Abergin | 3,347 Kb |
Slim Grid SASS SCSS v3.2 | Thesturs | 4,709 Kb |
Responsive Section hover effect to show content | Berdejitendra | 2,540 Kb |
Basic 3D Fullscreen Transition | Apetrov | 3,270 Kb |
Another brick in the wall | Fivera | 1,955 Kb |
Pomodoro Clock | Yas46 | 3,328 Kb |
A Pen by Stan Williams | Stanssongs | 6,706 Kb |
Flying Bee | Pwsm50 | 3,711 Kb |
AngularJS Skills | Supro | 3,312 Kb |
Custom Select Element | Agrayson | 3,616 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!