SVG Match on fire - GreenSock Animation
How do I make an svg match on fire - greensock animation?
This match animation is a part of the Happy New Year GreenSock SVG Animation by Petr Tichy.Check out the whole animation:. What is a svg match on fire - greensock animation? How do you make a svg match on fire - greensock animation? This script and codes were developed by Petr Tichy on 25 August 2022, Thursday.
SVG Match on fire - GreenSock Animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Match on fire - GreenSock Animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg id="match" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="94.5px" height="177.7px" viewBox="0 0 94.5 177.7" enable-background="new 0 0 94.5 177.7" xml:space="preserve"
> <defs> <clipPath id="matchStickMask"> <rect id="matchMask" fill="#ffffff" x="0" y="71" width="96.2" height="106.7"/> </clipPath> </defs> <g id="Match"> <path id="flame5" class="flame" fill="#F5CD08" d="M2.2,119.1c0,0,1.5,5.5,5.4,3.1c6-3.6-4.5-10-0.7-16.8C4.5,106.1,0.3,109.4,2.2,119.1z"/> <path id="flame3" class="flame" fill="#F5CD08" d="M19.2,132.1c0,0-24.4-4.6-16.7-24.6s16.7-17.8,11.4-28.7c-4.5-9.3-2.9-11.9-0.8-15.6 c4.6-8.3,1.5-12.6,0.8-16.1c3,1.3,5.5,3.4,6.6,5.5c1.3,4.3,0.8,8.5-1.3,13.8s3.1,5.5,6.1,2.5s3.1-2.9,4.8-5.3 c2.7,2.5,2.3,5.5,3.4,8.1c1.6,3.9,2.4,6.9,0,13.7c-2.4,6.9,9.3,13.2,7.2,20.3S39.7,132.1,19.2,132.1z"/> <path id="flame2" class="flame" fill="#F5CD08" d="M25.9,53.9c0,0,1,3.8,3.7,2.2c4.1-2.5-3.1-6.9-0.5-11.5C27.5,45,24.6,47.2,25.9,53.9z"/> <path id="flame1" class="flame" fill="#F5CD08" d="M14.3,6.6c0,0,0.7,2.6,2.6,1.5c2.9-1.7-2.2-4.8-0.3-8.1C15.4,0.3,13.4,1.9,14.3,6.6z"/> <g id="matchStick" clip-path="url(#matchStickMask)"> <g id="matchBody"> <rect x="52.5" y="109.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -89.3603 81.7375)" fill="#A15B07" width="3" height="78.9"/> <rect x="54.6" y="107.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -87.207 82.6294)" fill="#D28722" width="3" height="78.9"/> </g> <path id="matchHead" fill="#420502" d="M24.2,104.8c3.4,3.4,9.8,15.3,6.5,18.7c-3.4,3.4-15.3-3.1-18.7-6.5s-3.4-8.8,0-12.2 S20.8,101.4,24.2,104.8z"/> <circle id="matchHeadLight" fill="#56070B" cx="16.1" cy="108.6" r="3"/> </g> </g>
</svg>
<a href="https://ihatetomatoes.net/happy-new-year/" target="_blank" class="goToDemo">View full demo</a> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
<script src='http://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
SVG Match on fire - GreenSock Animation - Script Codes CSS Codes
body { background-color: #212121;
}
#match { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.goToDemo { display: block; position: absolute; top: 30px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #fff; text-decoration: none; text-transform: uppercase; padding: 10px 15px; border: 1px #fff solid; opacity: 0.7; -webkit-transition: all 0.3s linear; transition: all 0.3s linear;
}
.goToDemo:hover { background: #fff; color: #212121; opacity: 1;
}
SVG Match on fire - GreenSock Animation - Script Codes JS Codes
// match
var $flame1 = $('#flame1'), $flame2 = $('#flame2'), $flame3 = $('#flame3'), $flame5 = $('#flame5');
function getMatchTl(){ var tl = new TimelineMax({repeat: -1}); var tlTinyFlames = new TimelineMax({repeat: -1}); tlTinyFlames .set([$flame1, $flame2], {y: '+=70'}) .to($flame1, 0.8, {y: 0, ease:SteppedEase.ease.config(4)}, 0) .set($flame1, {autoAlpha: 0}) .to($flame2, 0.6, {y: '-=80', ease:SteppedEase.ease.config(3)}, 0.1) .set($flame2, {autoAlpha: 0}) .to($flame5, 0.7, {y: -50, ease:SteppedEase.ease.config(4)}, 0.2); tl .to($flame3, 0.4, {morphSVG:"M23.9,131.8c-11.8,0-31.6-6.2-20.7-24.7c3.8-6.5,11.2-7.8,12-16.7c1.2-13-4.5-11.9-6.1-19 c-0.8-3.4-0.7-3.8-0.7-5.8c0-0.1,0-0.1,0-0.2c0.5-2.2,2.7-6,4-4.3c0,0,0,0,0,0.1c0.1,0.1,0.2,0.3,0.3,0.5c1.7,3.8-1.3,2.7-0.5,8.2c0.9,6.2,7.3,13.4,9.9,10s4.4-4,6.1-3.7c3,2.1,0.8,4.3,0.4,6.2c-0.8,3.1-1.7,4.5-2.9,11.6c-1.2,7.1,9.7,1.3,15.2,8.2 C45.4,108.1,35.7,131.8,23.9,131.8z", rotation: 5, transformOrigin: 'bottom center', ease:SteppedEase.ease.config(3)}, 0) .to($flame3, 0.5, {morphSVG:"M25.4,131.8c-11.8,0-28.9-4.4-24.7-24.8c0.7-3.5,2-9.1,2.2-13.5S4,82.3,6.7,79.3 c1.6-1.8,1.5-1.6,5.1-2.3c3.6-0.7,7.4,6.5,8.8,7.1c4,1.5,4.4-4,6.1-3.7c3,2.1,1.9,9.6,0.4,13.8c-2.4,6.8,9.7,1.3,15.2,8.2C46.9,108.1,37.2,131.8,25.4,131.8z", ease:SteppedEase.ease.config(3)}, 0); return tl;
}
getMatchTl();
![SVG Match on fire - GreenSock Animation - Script Codes](http://shots.codepen.io/ihatetomatoes/pen/RrKPop-512.jpg)
Developer | Petr Tichy |
Username | ihatetomatoes |
Uploaded | August 25, 2022 |
Rating | 4.5 |
Size | 3,812 Kb |
Views | 28,336 |
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 |
JQuery For a Complete Beginners - Console, Window.Scroll, Window.Resize | 3,040 Kb |
Shopping Cart | 4,371 Kb |
Merry Christmallax - Skrollr.js animation | 2,772 Kb |
Awesome Custom Grids with Susy | 2,264 Kb |
JQuery For a Complete Beginners - Click, Hover, ToggleClass | 2,977 Kb |
GreenSock - TweenLite - Comp | 3,139 Kb |
GreenSock - staggerTo with cycle | 2,579 Kb |
CSS3 Spritesheet Fireworks Animation | 2,879 Kb |
Happy New Year - GreenSock DrawSVG Animation | 10,551 Kb |
Animating SVG With GreenSock | 5,944 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 |
Fluid Layout with Float | Jxqr97 | 1,785 Kb |
WRENCH - STAFF | Lolita-adams | 1,608 Kb |
Svg penguin | _massimo | 2,990 Kb |
Feedback Page | TessDiNapoli | 2,836 Kb |
Flat design iframe | Damienpm | 1,819 Kb |
Boxes | H3l1um | 2,563 Kb |
Rotate Demo | Agelber | 3,061 Kb |
Mapbox Directions with geolocation tracking | Pollardld | 5,827 Kb |
Materializecss input form | Jasonchan | 1,443 Kb |
Konami Code Easter Egg | Teolitto | 3,051 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!