Pulse Avatar on click with TweenMax
How do I make an pulse avatar on click with tweenmax?
First experiment with TweenMax, click on the avatar to make it pulse.. What is a pulse avatar on click with tweenmax? How do you make a pulse avatar on click with tweenmax? This script and codes were developed by Robert Borghesi on 27 August 2022, Saturday.
Pulse Avatar on click with TweenMax Previews
Pulse Avatar on click with TweenMax - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pulse Avatar on click with TweenMax</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Quicksand:700);
body { background: #2e2e30;
}
* { box-sizing: border-box;
}
.avatar-container { position: fixed; top: 50%; left: 50%; width: 150px; height: 150px; transform: translate(-75px, -75px);
}
.avatar { /*background-image: url("https://s-media-cache-ak0.pinimg.com/236x/3c/41/74/3c41748bb2526f33c5ff6aa3adcd0b20.jpg"); */ overflow: hidden; border-radius: 50%; border: solid 3px rgba(0, 150, 136, 0.3); width: 150px; height: 150px; background-size: cover; z-index: 2; position: absolute; cursor: pointer;
}
.avatar img { width: 100%; height: 100%;
}
.pulse { width: 150px; height: 150px; border-radius: 50%; background: rgba(0, 150, 136, 0.2); position: absolute; top: 0; left: 0; border: solid 2px #00796B; z-index: 1;
}
.name { position: fixed; top: calc(50% + 130px); text-align: center; left: 50%; transform: translateX(-50%); text-transform: uppercase; color: white; background: rgba(0, 150, 136, 0.2); border: solid 2px #00796B; padding: 5px 10px; font-family: 'Quicksand', sans-serif; opacity: 0;
}
.info { color: white; text-transform: uppercase; font-family: 'Quicksand', sans-serif; position: fixed; right: 10px; bottom: 10px; font-size: 10px; opacity: 0.5;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="avatar-container"> <div class="avatar"><img src="https://s-media-cache-ak0.pinimg.com/236x/3c/41/74/3c41748bb2526f33c5ff6aa3adcd0b20.jpg"></div> <div class="pulse" id="pulse1"></div> <div class="pulse" id="pulse2"></div> <div class="pulse" id="pulse3"></div> <div class="pulse" id="pulse4"></div> </div> <div class="name">Kurt Bunker</div> <div class="info">click on the avatar to pulse</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>Pulse Avatar on click with TweenMax - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Quicksand:700);
body { background: #2e2e30;
}
* { box-sizing: border-box;
}
.avatar-container { position: fixed; top: 50%; left: 50%; width: 150px; height: 150px; transform: translate(-75px, -75px);
}
.avatar { /*background-image: url("https://s-media-cache-ak0.pinimg.com/236x/3c/41/74/3c41748bb2526f33c5ff6aa3adcd0b20.jpg"); */ overflow: hidden; border-radius: 50%; border: solid 3px rgba(0, 150, 136, 0.3); width: 150px; height: 150px; background-size: cover; z-index: 2; position: absolute; cursor: pointer;
}
.avatar img { width: 100%; height: 100%;
}
.pulse { width: 150px; height: 150px; border-radius: 50%; background: rgba(0, 150, 136, 0.2); position: absolute; top: 0; left: 0; border: solid 2px #00796B; z-index: 1;
}
.name { position: fixed; top: calc(50% + 130px); text-align: center; left: 50%; transform: translateX(-50%); text-transform: uppercase; color: white; background: rgba(0, 150, 136, 0.2); border: solid 2px #00796B; padding: 5px 10px; font-family: 'Quicksand', sans-serif; opacity: 0;
}
.info { color: white; text-transform: uppercase; font-family: 'Quicksand', sans-serif; position: fixed; right: 10px; bottom: 10px; font-size: 10px; opacity: 0.5;
}
Pulse Avatar on click with TweenMax - Script Codes JS Codes
jQuery(document).ready(function($) { var body= $("body"), pulseElements = $(".pulse"), avatar = $(".avatar-container"), name = $('.name'); tlClick = new TimelineLite(), tlOpening = new TimelineLite(); TweenMax.set(name, {scale: 0.7}); TweenMax.set(pulseElements, {autoAlpha: '0.8'}); tlClick.pause(); tlOpening .set(body, {className: '+=is-animating'}) .set(avatar, {autoAlpha: 0,rotationX:-90, y: '-=50px', scale: 0.4}) .to(avatar, 1.8, {autoAlpha: 1, rotationX: 0, y: '+=50px' , scale: 1, ease: Power4.easeInOut}) .staggerTo(pulseElements, 6, {scale: '1.5', autoAlpha: '0', ease: Power1.easeOut, clearProps: 'all'}, 0.8, '-=0.5') .to(name, 3, {autoAlpha: 0.5, scale: 0.8, y: 10, ease: Power0.easeNone}, '0.6') .to(name, 3, {autoAlpha: 0, scale: 0.9, y: 20, ease: Power0.easeNone, clearProps: 'all'}, '3.6') .set(body, {className: '-=is-animating'}); // TIMELINE CLICK tlClick .set(body, {className: '+=is-animating'}) .set(name, {scale: 0.7}) .set(pulseElements, {autoAlpha: '0.8'}) .to(avatar, 0.3, {scale: '0.85'}) .to(avatar, 0.6, { scale:'1', ease: Bounce.easeOut}) .staggerTo(pulseElements, 6, {scale: '1.5', autoAlpha: '0', ease: Power1.easeOut}, 0.8, '-=0.5') .to(name, 3, {autoAlpha: 0.5, scale: 0.8, y: 10, ease: Power0.easeNone}, '0.6') .to(name, 3, {autoAlpha: 0, scale: 0.9, y: 20, ease: Power0.easeNone}, '3.6') .set(body, {className: '-=is-animating'}); avatar.on("click", function(){ if(!body.hasClass('is-animating')){ tlClick.play(0); } })
});
| Developer | Robert Borghesi |
| Username | dghez |
| Uploaded | August 27, 2022 |
| Rating | 3.5 |
| Size | 4,116 Kb |
| Views | 34,408 |
Do you need developer help for Pulse Avatar on click with TweenMax?
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!
Robert Borghesi (dghez) Script Codes
| Name | Size |
| Best 3 players on fifa 14 - HOVER THEM | 3,546 Kb |
| Anaglyph 3D with CSS-blend on mouseMove | 2,982 Kb |
| Continuous register clean form with autoresize input | 3,549 Kb |
| Continuous scrolling background of sticky header | 5,109 Kb |
| Opening with auto typing responsive sentences with random background color loop | 5,435 Kb |
| Fullscreen slice hero slider | 9,370 Kb |
| SlamDunk Parallax on MouseMove | 2,512 Kb |
| Opening animation from circular avatar | 5,977 Kb |
| Enel brand - logo animation with tweenmax | 127,271 Kb |
| Text-mask background moving on MouseMove - v2 | 3,050 Kb |
Create amazing blog posts 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!
Similar Scripts & Codes
| Name | Username | Size |
| A Pen by Ben Babics | Benbabics | 2,957 Kb |
| Shop Talk logo made in CSS | Hugo | 19,368 Kb |
| SVG Text Masking | JMChristensen | 2,141 Kb |
| 404 Page | Saransh | 2,666 Kb |
| Knob rotation | Alemesre | 2,122 Kb |
| Google Maps API Ground Overlay | Boycetrus | 2,961 Kb |
| Web Spiral - p5.js | TWAIN | 2,183 Kb |
| Flex Chart | James_zedd | 4,111 Kb |
| Multiple jCarousel | Pafnuty | 2,461 Kb |
| A Pen by Dalton Liu | Liudalton | 12,437 Kb |
Do you want hide your ip address?
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!