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();
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 |
Merry Christmallax - Skrollr.js animation | 2,772 Kb |
CSS3 Spritesheet Fireworks Animation | 2,879 Kb |
Animating SVG With GreenSock | 5,944 Kb |
GreenSock - Each Loop with tweens | 3,054 Kb |
CSS3 Glitch Animation | 3,441 Kb |
JQuery For a Complete Beginners - Click, Hover, ToggleClass | 2,977 Kb |
Happy New Year - GreenSock DrawSVG Animation | 10,551 Kb |
GreenSock - Click | 2,582 Kb |
Animated Preloader - GreenSock DrawSVG Plugin | 5,220 Kb |
Merry SVG Christmas | 3,902 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 |
Delete Hover | Chungman93 | 2,557 Kb |
Infractions - Attitude | Kylie_Joseph | 7,672 Kb |
Text Looping Transition | Agelber | 5,619 Kb |
Revolving Text Landing Page Trial | TimRuby | 2,976 Kb |
Bootstrap example | Ssaakkaa | 2,716 Kb |
Starting out with Ember.JS | Cfleschhut | 4,808 Kb |
Project_one | MOHIM | 9,592 Kb |
RequestAnimationFrame | Martin-banks | 2,541 Kb |
Svg animation draw | SzymonDziewonski | 5,545 Kb |
Sign Up Form | Sicontis | 5,272 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!