SVG border animation 2

Developer
Zach Saucier
Size
3,307 Kb
Views
34,408
  1. SVG border animation 2 Previews
  2. SVG border animation 2 HTML Codes
  3. SVG border animation 2 CSS Codes
  4. SVG border animation 2 JS Codes

How do I make an svg border animation 2?

SVG + GSAP to achieve this effectBased on Carl Brenner's very wonderful website http://carlphilippebrenner.com/. What is a svg border animation 2? How do you make a svg border animation 2? This script and codes were developed by Zach Saucier on 20 August 2022, Saturday.

SVG border animation 2 Previews
IQ Test

SVG border animation 2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG border animation 2</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script> <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! */ html, body { background: rgb(20,20,20); text-align: center; height: 100%; overflow: hidden;
}
.svg-wrapper { background:#BFBFC2; position: relative; height:470px; top:50%; transform: translateY(-50%); display:inline-block; margin-right:30px; margin-left:30px; width: 300px;
}
.svg { box-shadow: inset 0px 0px 0px 3px rgb(20,20,20); }
.shape { stroke-width: 2px; fill: transparent; stroke: #EAEAEA; transition: fill .6s;
}
.one { stroke-dasharray: 470 300 470 300; stroke-dashoffset: 470; }
.two { stroke-dasharray: 300 470 300 470; }
.text { font-family: 'Roboto Condensed'; font-size: 22px; line-height: 0px; letter-spacing: 8px; color: rgb(20,20,20); top: -350px; position: relative; transition:color .6s;
}
.subtext { color:#65626b; text-transform:uppercase; font-family:'Roboto Condensed'; top: -150px; position: relative; font-size:9px; text-align:left; margin-left:50px;
}
.first { margin-bottom:30px; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="svg-wrapper"> <svg class='svg' height="470" width="300" xmlns="http://www.w3.org/2000/svg"> <rect class="shape one" height="470" width="300" /> <rect class="shape two" height="470" width="300" /> <div class="text">uji</div> <div class="subtext"> <div class="first">2014</div> <div class="second">For practice</div> </div> </svg>
</div>
<div class="svg-wrapper"> <svg class='svg' height="470" width="300" xmlns="http://www.w3.org/2000/svg"> <rect class="shape one" height="470" width="300" /> <rect class="shape two" height="470" width="300" /> <div class="text">urbs</div> <div class="subtext"> <div class="first">2014</div> <div class="second">For practice</div> </div> </svg>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

SVG border animation 2 - Script Codes CSS Codes

html, body { background: rgb(20,20,20); text-align: center; height: 100%; overflow: hidden;
}
.svg-wrapper { background:#BFBFC2; position: relative; height:470px; top:50%; transform: translateY(-50%); display:inline-block; margin-right:30px; margin-left:30px; width: 300px;
}
.svg { box-shadow: inset 0px 0px 0px 3px rgb(20,20,20); }
.shape { stroke-width: 2px; fill: transparent; stroke: #EAEAEA; transition: fill .6s;
}
.one { stroke-dasharray: 470 300 470 300; stroke-dashoffset: 470; }
.two { stroke-dasharray: 300 470 300 470; }
.text { font-family: 'Roboto Condensed'; font-size: 22px; line-height: 0px; letter-spacing: 8px; color: rgb(20,20,20); top: -350px; position: relative; transition:color .6s;
}
.subtext { color:#65626b; text-transform:uppercase; font-family:'Roboto Condensed'; top: -150px; position: relative; font-size:9px; text-align:left; margin-left:50px;
}
.first { margin-bottom:30px; }

SVG border animation 2 - Script Codes JS Codes

// For more check out zachsaucier.com
var si = document.querySelectorAll(".one"), to = document.querySelectorAll(".two"), te = document.querySelectorAll(".text");
for(var i = 0, j = si.length; i < j; i++) { applyEverything(si[i], to[i], te[i]);
}
function applyEverything(sides, topbottom, text) { var gparent = sides.parentNode.parentNode; gparent.onmouseenter = function() { sides.style.fill = "rgb(20,20,20)"; text.style.color = "white"; console.log("over"); // Originally these made sense... Then reality happened TweenLite.to(topbottom, .8, {strokeDasharray:"-130 900 -130 900", strokeDashoffset:20, ease:Power2.linear}); TweenLite.to(topbottom, .6, {strokeDasharray:"470 300 470 300", strokeDashoffset:470, delay:.3, ease:Power2.linear}); TweenLite.to(sides, .8, {strokeDasharray:"-200 1070 -200 1000", strokeDashoffset:640, ease:Power2.linear}); TweenLite.to(sides, .6, {strokeDasharray:"300 470 300 470", strokeDashoffset:770, delay:.3, ease:Power2.linear}); setTimeout(function() { // Delay fade when leaving hover sides.style.transition = "fill .6s .6s"; text.style.transition = "color .6s .6s"; }, 10); } gparent.onmouseleave = function() { sides.style.fill = "transparent"; text.style.color = "rgb(20,20,20)"; console.log("out"); setTimeout(function() { sides.style.transition = "fill .6s"; // Reset fade for next hover text.style.transition = "color .6s"; }, 10); // Originally these made sense... Then reality happened TweenLite.to(topbottom, .8, {strokeDasharray:"-130 1050 -130 900", strokeDashoffset:20, ease:Power2.linear}); TweenLite.to(topbottom, .6, {strokeDasharray:"300 470 300 470", strokeDashoffset:0, delay:.4, ease:Power2.linear}); TweenLite.to(sides, .8, {strokeDasharray:"-200 1335 -200 1000", strokeDashoffset:640, ease:Power2.linear}); TweenLite.to(sides, .6, {strokeDasharray:"470 300 470 300", strokeDashoffset:470, delay:.4, ease:Power2.linear}); }
}
SVG border animation 2 - Script Codes
SVG border animation 2 - Script Codes
Home Page Home
Developer Zach Saucier
Username Zeaklous
Uploaded August 20, 2022
Rating 3.5
Size 3,307 Kb
Views 34,408
Do you need developer help for SVG border animation 2?

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!

Zach Saucier (Zeaklous) Script Codes
Name
Business card
Simple CSS Circular Motion Technique
Simple, flat contact form
Swirling dots
Asset loading effects demo
Hipster date intro screen
Building Images
Single Element gif Recreation
Pausing Transitions
Changing a CSS Animation at its Current Values
Create amazing video scripts 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!