SVG Mask Animation
How do I make an svg mask animation?
What is a svg mask animation? How do you make a svg mask animation? This script and codes were developed by Nathan Gordon on 31 July 2022, Sunday.
SVG Mask Animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Mask Animation</title>
</head>
<body> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100"> <defs> <clipPath id="myClip"> <path d="M48.28,7.333v82.838c0,1.381-1.117,2.496-2.495,2.496H14.762c-1.379,0-2.499-1.115-2.499-2.496V7.333H25.64v72.029h9.268V7.333H48.28z M65.1,92.667V20.64h9.265v72.027h13.374V9.83c0-1.379-1.117-2.497-2.497-2.497H54.219c-1.379,0-2.497,1.118-2.497,2.497v82.837H65.1z"/> </clipPath> </defs> <path clip-path="url(#myClip)" fill="none" stroke="#000000" stroke-width="20" d="M18.5,7c0,0,0,68.5,0,75.5s22.75,7,22.75,0C41.417,56.5,41.301,7,41.301,7"/> <path clip-path="url(#myClip)" fill="none" stroke="#000000" stroke-width="20" d="M81.5,93c0,0,0-68.5,0-75.5s-22.91-7-22.91,0c-0.166,26,0.029,75.5,0.029,75.5"/>
</svg>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.1/TweenMax.min.js"></script> <script src="js/index.js"></script>
</body>
</html>
SVG Mask Animation - Script Codes JS Codes
$(document).ready(function() { // Store a reference to our paths, excluding our clip path var paths = $('path:not(defs path)'); // For each path, set the stroke-dasharray and stroke-dashoffset // equal to the path's total length, hence rendering it invisible paths.each(function(i, e) { e.style.strokeDasharray = e.style.strokeDashoffset = e.getTotalLength(); }); // Create a timeline for ease of manipulation and the possibility // to play the animation back and forth at the requested speed. var tl = new TimelineMax(); // Add each separate line animation to the timeline, animating the // stroke-dashoffset to 0. Use the duration, delay and easing to // achieve the perfect animation. tl.add([ TweenLite.to(paths.eq(0), 1, {strokeDashoffset: 0, delay: 0.0}), TweenLite.to(paths.eq(1), 1, {strokeDashoffset: 0, delay: 0.5}), ]); })
Developer | Nathan Gordon |
Username | gordonnl |
Uploaded | July 31, 2022 |
Rating | 3 |
Size | 2,201 Kb |
Views | 56,672 |
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 |
ThreeJS Template | 2,306 Kb |
Ocean | 2,817 Kb |
Pablo the Flamingo physics | 2,775 Kb |
Static Fire and Haze | 4,873 Kb |
Dynamic Fire and Haze | 5,183 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 |
Tic Tac Toe | Volv | 4,862 Kb |
Basic HTML Slideshow | Tomhodgins | 3,386 Kb |
Click Based Rotation Demo | Zeaklous | 2,086 Kb |
Two column of responsive height | Fixie | 2,908 Kb |
Experiment | Toddmoy | 2,849 Kb |
Custom Select Element | Agrayson | 3,616 Kb |
Glitchy Text Effect | Kescoe | 2,208 Kb |
Confirm Close Of Foundation Reveal Modal | Winghouchan | 1,818 Kb |
Plotting Points with D3.js | Laurakelly | 31,996 Kb |
Day 11 - Calendar Card | Arnellebalane | 6,984 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!