Share Page Animation
How do I make an share page animation?
What is a share page animation? How do you make a share page animation? This script and codes were developed by Kasper on 30 January 2023, Monday.
Share Page Animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Share Page Animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="svgimg2">
<svg version="1.1" class="share" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g id="Share-Icon"> <circle fill="#333333" cx="66.6" cy="53.4" r="6.9"/> <circle fill="#333333" cx="31.4" cy="71" r="6.9"/> <line fill="none" stroke="#333333" stroke-width="3.92" stroke-miterlimit="10" x1="31.4" y1="71" x2="66.6" y2="53.4"/> <line fill="none" stroke="#333333" stroke-width="3.92" stroke-miterlimit="10" x1="31.4" y1="71" x2="66.6" y2="84.7"/> <circle fill="#333333" cx="66.6" cy="84.7" r="6.9"/>
</g>
<line id="Line-1" fill="none" stroke="#333333" stroke-width="3" stroke-miterlimit="10" x1="25" y1="26.5" x2="74" y2="26.5"/>
<line id="Line-2" fill="none" stroke="#333333" stroke-width="3" stroke-miterlimit="10" x1="25" y1="51.5" x2="74" y2="51.5"/>
<line id="Line-3" fill="none" stroke="#333333" stroke-width="3" stroke-miterlimit="10" x1="25" y1="75.5" x2="74" y2="75.5"/>
<path id="Paper_Outline" fill="none" stroke="#333333" stroke-width="3" stroke-miterlimit="10" d="M85.5,85.2 c0,5.7-4.6,10.3-10.3,10.3H23.8c-5.7,0-10.3-4.6-10.3-10.3V15.8c0-5.7,4.6-10.3,10.3-10.3h51.4c5.7,0,10.3,4.6,10.3,10.3V85.2z"/>
</svg>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Share Page Animation - Script Codes CSS Codes
.svgimg2 { width:200px; margin:auto; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)
}
#Share-Icon { visibility:hidden;
}
Share Page Animation - Script Codes JS Codes
var line1 = $('#Line-1'), line2 = $('#Line-2'), line3= $('#Line-3'), share = $('#Share-Icon'), masterTlPaper = new TimelineMax({paused:true}), tlPaper = new TimelineMax(), tlShare = new TimelineMax();
tlPaper .fromTo(line1,0.3,{x: 0}, {x : -5, autoAlpha: 0 }) .fromTo(line2,0.3,{x: 0}, {x : 5, autoAlpha: 0 }) .fromTo(line3,0.3,{x:0}, {x: -5, autoAlpha: 0});
tlShare .fromTo(share,0.7,{y:0, autoAlpha:0},{y : -18, autoAlpha:1})
masterTlPaper.add(tlPaper);
masterTlPaper.add(tlShare);
document.querySelector('.svgimg2').addEventListener('mouseover',function(){ masterTlPaper.play()
})
document.querySelector('.svgimg2').addEventListener('mouseleave',function(){ masterTlPaper.reverse()
})
Developer | Kasper |
Username | kdbkapsere |
Uploaded | January 30, 2023 |
Rating | 3 |
Size | 2,363 Kb |
Views | 10,120 |
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 |
Login Form | 2,321 Kb |
Bootstrap Template | 1,292 Kb |
A Pen by kasper | 5,021 Kb |
Tiles | 3,681 Kb |
Slack Logo test | 3,217 Kb |
Unknown Pleasures WIP | 18,874 Kb |
Microscope Testtube Animation | 3,383 Kb |
Ryu Hadouken GSAP Animation | 13,838 Kb |
Love 2 rainbow | 3,360 Kb |
Growing Heart Animation | 2,109 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 |
Project MMetro beta | Atomicsong | 5,157 Kb |
Feedback Page | TessDiNapoli | 2,836 Kb |
Simple DevTools | Deegill | 2,511 Kb |
CSS3 Butterfly | Timohausmann | 3,430 Kb |
Donald Trump - The New Yorker | Agbales | 2,502 Kb |
Background-blend-mode Test | 0x04 | 4,744 Kb |
Popup Modal | Aldlevine | 3,696 Kb |
A Pen by utcwebdev | Utcwebdev | 2,856 Kb |
Vanilla modal window | Jasonhowmans | 3,554 Kb |
Emberjs Bootstrap Modal Carousel | Somethingkindawierd | 4,233 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!