Animate SVG Gradient

Developer
Rodrigo Hernando
Size
2,239 Kb
Views
48,576
  1. Animate SVG Gradient Previews
  2. Animate SVG Gradient HTML Codes
  3. Animate SVG Gradient CSS Codes
  4. Animate SVG Gradient JS Codes

How do I make an animate svg gradient?

SVG gradient animation using RaphaelJS and Greensock Animation Platforms colorProps plugin and onUpdate callback. What is a animate svg gradient? How do you make a animate svg gradient? This script and codes were developed by Rodrigo Hernando on 18 November 2022, Friday.

Animate SVG Gradient Previews
IQ Test

Animate SVG Gradient - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animate SVG Gradient</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h2> SVG Gradient Animation using RaphaelJS and <br>Greensock Animation Platform
</h2>
<button id="btn1">Animate Gradient</button><button id="btn2">Reverse Gradient</button> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ColorPropsPlugin.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Animate SVG Gradient - Script Codes CSS Codes

body
{ margin:0; background:#000; font:bold 16px "Trebuchet MS", Arial, Helvetica, sans-serif;; color:#fff;
}
button
{ font:14px "Trebuchet MS", Arial, Helvetica, sans-serif; padding:3px;
}
h2
{ text-align:center;
}

Animate SVG Gradient - Script Codes JS Codes

var btn1 = $("#btn1"), btn2 = $("#btn2"), //tween the properties of this object to apply the colors to the SVG object colorObj = {a:'#f00',b:'#f00'}, t = TweenLite.to(colorObj, 2,{ colorProps:{a:'#f0f', b:'#00f'}, onUpdate:upFn, paused:true }); //raphael elements paper = Raphael(10,150,400,200), rectangle = paper.rect(0,0,400,200, 10);
rectangle.attr("fill",'45-rgb(255,0,0)-rgb(255,0,0)-rgb(255,0,0)');
function upFn()
{ console.log(colorObj.a); rectangle.attr("fill",'45-rgb(255,0,0)-' + colorObj.a + '-' + colorObj.b);
}
btn1.click(function()
{ t.play();
});
btn2.click(function()
{ t.reverse();
});
Animate SVG Gradient - Script Codes
Animate SVG Gradient - Script Codes
Home Page Home
Developer Rodrigo Hernando
Username rhernando
Uploaded November 18, 2022
Rating 3.5
Size 2,239 Kb
Views 48,576
Do you need developer help for Animate SVG Gradient?

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!

Rodrigo Hernando (rhernando) Script Codes
Name
Toggle Tween Direction
Z Index Tween
Simple Interactive 3D Cube
Circular Progress Bar
Cross-Browser Flip Card
Simple Slider Powered by GreenSock
Simple Drop Down Menu
Greensock Swipe Slides
Update tween progress with Draggable
Greensock 3D Preloader Spinner
Create amazing art & images 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!