Science Bubbles Animation
How do I make an science bubbles animation?
What is a science bubbles animation? How do you make a science bubbles animation? This script and codes were developed by Kasper on 30 January 2023, Monday.
Science Bubbles Animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Science Bubbles Animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="svgimg3">
<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 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<path fill="#333333" d="M48,67.6c0,0.8-0.6,1.4-1.4,1.4H31.4c-0.8,0-1.4-0.6-1.4-1.4v-0.1c0-0.8,0.6-1.4,1.4-1.4h15.1 c0.8,0,1.4,0.6,1.4,1.4V67.6z"/>
<path fill="none" stroke="#333333" stroke-width="2" stroke-miterlimit="10" d="M50.6,34h10c2.6,0,4.4,1.9,4.4,4.5v16.3 c0,3.2,1.1,6.4,2.7,9.1l1.2,1.8l13.3,23.1c2.5,4.4-0.6,10.2-5.6,10.2H50.6H24.3c-5,0-8.2-5.8-5.7-10.2l12.9-22.9l0.8-2.2 c1.3-2.5,1.7-5.4,1.7-8.2v-17c0-2.6,2.7-4.5,5.4-4.5h11.1H50.6z"/>
<path fill="#333333" d="M44,78.6c0,0.8-0.6,1.4-1.4,1.4H25.4c-0.8,0-1.4-0.6-1.4-1.4v-0.1c0-0.8,0.6-1.4,1.4-1.4h17.1 c0.8,0,1.4,0.6,1.4,1.4V78.6z"/>
<path fill="#333333" d="M39,88.6c0,0.8-0.6,1.4-1.4,1.4H20.4c-0.8,0-1.4-0.6-1.4-1.4v-0.1c0-0.8,0.6-1.4,1.4-1.4h17.1 c0.8,0,1.4,0.6,1.4,1.4V88.6z"/>
<path fill="#333333" d="M69.7,35.5c0,1.5-1.3,2.5-2.9,2.5H32.3c-1.6,0-2.9-1-2.9-2.5l0,0c0-1.5,1.3-2.5,2.9-2.5h34.4 C68.4,33,69.7,34,69.7,35.5L69.7,35.5z"/>
<circle id="Bubble-1" fill="none" stroke="#333333" stroke-width="1.5268" stroke-miterlimit="10" cx="53.5" cy="51" r="2.4"/>
<circle id="Bubble-2" fill="none" stroke="#333333" stroke-width="1.5268" stroke-miterlimit="10" cx="42.8" cy="48.9" r="4.9"/>
<circle id="Bubble-3" fill="none" stroke="#333333" stroke-width="1.5268" stroke-miterlimit="10" cx="56" cy="45.4" r="6"/>
<circle id="Bubble-4" fill="none" stroke="#333333" stroke-width="1.5268" stroke-miterlimit="10" cx="42.1" cy="38.6" r="3.2"/>
<circle id="Bubble-5" fill="none" stroke="#333333" stroke-width="1.5268" stroke-miterlimit="10" cx="46.5" cy="47" r="2.4"/>
<circle id="Bubble-6" fill="none" stroke="#333333" stroke-width="1.5268" stroke-miterlimit="10" cx="52.8" cy="38.9" r="4.9"/>
</svg> </div>
</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>
Science Bubbles Animation - Script Codes CSS Codes
body { margin:auto; text-align:center;
}
.svgimg3 svg{ width:200px; margin:auto; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%)
}
#Bubble-1,#Bubble-2,#Bubble-3,#Bubble-4,#Bubble-5,#Bubble-6 { opacity:0;
}
Science Bubbles Animation - Script Codes JS Codes
var bubbles = $('#Bubble-4,#Bubble-3,#Bubble-2,#Bubble-1,#Bubble-5,#Bubble-6'),
tlBubbles = new TimelineMax({paused:true,repeat:-1});
tlBubbles.staggerFromTo(bubbles,0.5,{y:-18,opacity:1,immediateRender:false},{y:-30,opacity:0},0.3);
$(".svgimg3").hover(function(){
tlBubbles.play();
},function(){
TweenMax.to(tlBubbles,1,{progress:1}),
tlBubbles.pause();
})
Developer | Kasper |
Username | kdbkapsere |
Uploaded | January 30, 2023 |
Rating | 3 |
Size | 2,494 Kb |
Views | 6,072 |
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 |
Social Icon Fun | 2,037 Kb |
Bootstrap Template | 1,292 Kb |
A Pen by kasper | 5,021 Kb |
Love 2 rainbow | 3,360 Kb |
Ryu Hadouken GSAP Animation | 13,838 Kb |
Microscope Testtube Animation | 3,383 Kb |
Login Form | 2,321 Kb |
Test | 2,323 Kb |
LinkedIn Loader Animation | 2,691 Kb |
Tiles | 3,681 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 |
Bootstrap Responsive Menu Drawer | JesseGlacken | 3,777 Kb |
SVG Text Masking | JMChristensen | 2,141 Kb |
Heatmap Color Scales | Stevepepple | 2,331 Kb |
FreeCodeCamp - Simon Game | Ivhed | 8,481 Kb |
CSS Variables | Jdsteinbach | 4,759 Kb |
Table Exercise | Fresco | 9,585 Kb |
My three.js practice | Esambino | 3,203 Kb |
DevCamp 2014 - Denver Public Library | See8ch | 5,033 Kb |
TweenMax transformOrigin Bubble | Nicolund | 2,209 Kb |
Simple search using AngularJS | Haykou | 1,802 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!