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 Previews
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();
| Developer | Petr Tichy |
| Username | ihatetomatoes |
| Uploaded | August 25, 2022 |
| Rating | 4.5 |
| Size | 3,812 Kb |
| Views | 28,336 |
Do you need developer help for SVG Match on fire - GreenSock Animation?
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!
Petr Tichy (ihatetomatoes) Script Codes
| Name | Size |
| GreenSock - TweenLite demo - Start | 2,541 Kb |
| GreenSock - Each Loop with tweens | 3,054 Kb |
| JQuery For a Complete Beginners - Console, Window.Scroll, Window.Resize | 3,040 Kb |
| Animated Preloader - GreenSock DrawSVG Plugin | 5,220 Kb |
| CSS3 Glitch Animation | 3,441 Kb |
| Animating SVG With GreenSock | 5,944 Kb |
| Merry Christmallax - Part 2 | 3,120 Kb |
| Merry Christmallax - Skrollr.js animation | 2,772 Kb |
| GreenSock - staggerTo with cycle | 2,579 Kb |
| GreenSock - Click | 2,582 Kb |
Create amazing love letters 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 |
| RequestAnimationFrame | Martin-banks | 2,541 Kb |
| Waveform function for a siren tone modulation | Clafou | 1,656 Kb |
| Polygon Dodecahedron in CSS | Vennsoh | 7,606 Kb |
| Weather App 2 | MightyJoeW | 2,877 Kb |
| Get third wednesday | Wojtek1150 | 2,691 Kb |
| A Pen by Kenny Mark | Kennymark | 5,574 Kb |
| Vue Transition | Chenming142 | 4,561 Kb |
| Underlined form fields | Mitchdot | 2,323 Kb |
| Review test | Otro_user_gil | 4,054 Kb |
| Animate elements with fixed gradient | Badabam | 4,406 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!