Drip Drop

Developer
Jon Ambas
Size
3,011 Kb
Views
24,288
  1. Drip Drop Previews
  2. Drip Drop HTML Codes
  3. Drip Drop CSS Codes
  4. Drip Drop JS Codes

How do I make an drip drop?

Gooey SVG filter, and some GSAP. What is a drip drop? How do you make a drip drop? This script and codes were developed by Jon Ambas on 19 October 2022, Wednesday.

Drip Drop Previews
IQ Test

Drip Drop - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Drip Drop</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> <div class="circle__wrapper"> <div class="circle__link"></div> <div class="circle__drop"></div> <div class="circle__main"></div>
</div>
<svg class="svg" viewBox="0 0 200 200"><defs> <filter id="goo"> <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" /> <feBlend in="SourceGraphic" in2="goo" /> </filter>
</defs></svg> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Drip Drop - Script Codes CSS Codes

.circle__main, .circle__drop, .circle__link { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 50%; background: #C2DAD7;
}
.circle__wrapper { position: relative; height: 100%; width: 100%; -webkit-filter: url("#goo"); filter: url("#goo");
}
.circle__main { width: 250px; height: 250px; box-shadow: inset -14px 0px 0 -2px rgba(0, 0, 0, 0.08);
}
.circle__drop { width: 70px; height: 70px; box-shadow: inset -5px -1px 0 1px rgba(0, 0, 0, 0.1);
}
.circle__link { width: 25px; height: 50px; box-shadow: inset -6px -8px 0 2px rgba(0, 0, 0, 0.08);
}
html { background-color: #384766;
}
html, body { height: 100%; overflow: hidden;
}

Drip Drop - Script Codes JS Codes

var drop = $('.circle__drop'), main = $('.circle__main'), link = $('.circle__link'), fill = $('.circle__fill'), h = $(window).height();
var tl = new TimelineMax({repeat:-1, repeatDelay: 0});
tl.timeScale(1);
tl.set(drop, {y: -h, scale: 0.7})	.set(link, {y: 55})	.set(main, {scale: 1})	// Move drop to middle	.to(drop, 0.7, {y: 70, ease: Power0.easeNone})	// Move drop below main	.to(drop, 1.4, {y: 140, scale: 1, ease: Elastic.easeOut.config(1)})	.to(link, 1.4, {y: 110, ease: Elastic.easeOut.config(1)}, '-=1.4')	// Wobble main	.to(main, 0.15, {scaleY: 0.85, scaleX: 1.15, ease: Power2.easeOut}, '-=1.55')	.to(main, 1.45, {scale: 1, ease: Elastic.easeOut.config(1)}, '-=1.4')	// Slow stretch	.to(drop, 1.5, {y: '+=16', ease: Power1.easeIn})	.to(link, 1.5, {y: '+=16', ease: Power1.easeIn}, '-=1.5')	.to(main, 1.5, {scaleY: 1.06, scaleX: 0.94, ease: Power1.easeIn}, '-=1.5')	// Move drop out	.to(drop, 0.7, {y: h, ease: Power2.easeIn})	.to(link, 0.25, {y: 0, ease: Power1.easeIn}, '-=0.6')	// Wobble back	.to(main, 1.4, {scale: 1, ease: Elastic.easeOut.config(2)}, '-=0.5');
Drip Drop - Script Codes
Drip Drop - Script Codes
Home Page Home
Developer Jon Ambas
Username jonambas
Uploaded October 19, 2022
Rating 4
Size 3,011 Kb
Views 24,288
Do you need developer help for Drip Drop?

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!

Jon Ambas (jonambas) Script Codes
Name
Looping through a sprite sheet
Cubes
Happy New Years
Cell Focusing
Playing with SVGs
A Pen by Jon Ambas
Polygons with clip-path
Sidebar Thing
Bee Mine
Coffee
Create amazing love letters 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!