TweenMax transformOrigin Bubble

Developer
Nicolaj Lund Nielsen
Size
2,209 Kb
Views
44,506
  1. TweenMax transformOrigin Bubble Previews
  2. TweenMax transformOrigin Bubble HTML Codes
  3. TweenMax transformOrigin Bubble CSS Codes
  4. TweenMax transformOrigin Bubble JS Codes

How do I make an tweenmax transformorigin bubble?

What is a tweenmax transformorigin bubble? How do you make a tweenmax transformorigin bubble? This script and codes were developed by Nicolaj Lund Nielsen on 13 September 2022, Tuesday.

TweenMax transformOrigin Bubble Previews
IQ Test

TweenMax transformOrigin Bubble - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>TweenMax transformOrigin Bubble</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <div id="circle"> <em></em> </div> <div id="shadow"></div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.1/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

TweenMax transformOrigin Bubble - Script Codes CSS Codes

/* ============= Tooltip ============= */
body {background:#333;}
.wrapper { position:relative; padding-top:40px; width: 100px; height:130px; margin:0 auto; text-align:center;
}
#circle { position:relative; width:100px; height:100px; border-radius:50%; background:#bada11; /* Alpha for all browsers except IE8 and ealier */ opacity:0; -moz-opacity:0; -khtml-opacity: 0; /*visibility:hidden;*/
}
#circle em { position: absolute; bottom:-6px; left:50%; margin-left:-12px; width: 0; height: 0; border-top: 8px solid #bada11; border-right: 12px solid rgba(0, 0, 0, 0); border-left: 12px solid rgba(0, 0, 0, 0); z-index: 0;
}
#shadow { position:absolute; width:60px; height:20px; left:50%; bottom:0; margin-left:-30px; background-color:#fff; border-radius:4px;
}

TweenMax transformOrigin Bubble - Script Codes JS Codes

var shadow = document.getElementById("shadow");
var circle = document.getElementById("circle");
TweenMax.to(circle, 0.4, { css: { scaleX: 0.1, scaleY: 0.1, }
});
shadow.onmouseover = function (e) { TweenMax.to(circle, 0.6, { css: { scaleX: 1, scaleY: 1, transformOrigin: "center bottom", autoAlpha: 1 }, ease: Power2.easeOut });
}
shadow.onmouseout = function (e) { TweenMax.to(circle, 0.4, { css: { scaleX: 0.1, scaleY: 0.1, transformOrigin: "center bottom", autoAlpha: 0 }, ease: Power2.easeOut });
}
TweenMax transformOrigin Bubble - Script Codes
TweenMax transformOrigin Bubble - Script Codes
Home Page Home
Developer Nicolaj Lund Nielsen
Username nicolund
Uploaded September 13, 2022
Rating 3
Size 2,209 Kb
Views 44,506
Do you need developer help for TweenMax transformOrigin Bubble?

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!

Nicolaj Lund Nielsen (nicolund) Script Codes
Name
Tweenmax Integer Tween
TweenMax staggerTo worm
TimelineMax Circular loader
FrameByFrame CSS animation
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!