Animated gradient text

Developer
Jon Christensen
Size
3,791 Kb
Views
32,384
  1. Animated gradient text Previews
  2. Animated gradient text HTML Codes
  3. Animated gradient text CSS Codes
  4. Animated gradient text JS Codes

How do I make an animated gradient text?

Using SVG to not only fill the text with a gradient, but GSAP to apply an additional animation to that gradient fill. This was originally thought up from an awesome animation on Animate.css's homepage. It should have deeper browser support than the webkit CSS version.. What is a animated gradient text? How do you make a animated gradient text? This script and codes were developed by Jon Christensen on 03 August 2022, Wednesday.

Animated gradient text Previews
IQ Test

Animated gradient text - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated gradient text</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> <div class="pen-intro"> <h1>Animated Gradient Text</h1> <h2>Use SVG to make animated gradient filled text</h2> <p>I originally saw this done on <a href="https://daneden.github.io/animate.css/" target="_blank">animate.css</a>'s homepage way back when with webkit only CSS properties (props to Daniel Eden for such a cool effect). But I got to thinking there had to be a way that was cross browser. Thanks to <a href="http://tympanus.net/codrops/2015/02/16/create-animated-text-fills/" target="_blank">this article</a>, there was! SVG of course. That, and using the &lt;feColorMatrix&gt; filter in SVG, you can do the exact same "hue rotate" effect.</p>
</div>
<div id="container">	<span class="text">Text</span> <svg> <!-- Gradient --> <linearGradient id="gr-simple" x1="0" y1="0" x2="100%" y2="100%"> <stop stop-color="hsl(50, 100%, 70%)" offset="10%"/> <stop stop-color="hsl(320, 100%, 50%)" offset="90%"/> </linearGradient> <filter id="svgHueRotate"> <feColorMatrix id="svgHueRotateMatrix" type="hueRotate" values="0" /> </filter> <!-- Text --> <text text-anchor="left" x="0%" y="0%" dy="0.889em" class="text" filter="url(#svgHueRotate)" > Text </text>
</svg>
</div> <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="js/index.js"></script>
</body>
</html>

Animated gradient text - Script Codes CSS Codes

/* Main stuff */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:800);
#container { color: transparent; position: relative; display: inline-block; margin: 0 auto;
}
.text { font: 14.5em/1 Open Sans, Impact; text-transform: uppercase; fill: url(#gr-simple);
}
/* Other stuff */
body { background: #FFF; margin: 0;
}
svg { position: absolute; width: 100%; height: 100%; top: 0; left: 0;
}
/* Make things perty */
html { height: 100%;
}
body { font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; background: url(http://www.jmchristensendesign.com/wp-content/themes/jmcdsn/images/intro_default-background.jpg); color: #fff; height: 100%; padding-top: 2em; text-align: center;
}
h1,
h2 { margin: 0; text-transform: uppercase; text-shadow: 0 0 0.5em black;
}
h2 { font-weight: 300;
}
button { border: none; border-radius: 0.25em; background: orange; padding: 0.25em 0.5em; -webkit-transition: background 250ms ease-in-out; transition: background 250ms ease-in-out;
}
button:hover { background: #cc8400;
}
.pen-intro { max-width: 640px; margin: 0 auto;
}
a { color: orange; text-decoration: none; -webkit-transition: color 250ms ease-in-out; transition: color 250ms ease-in-out;
}
a:hover { color: yellow;
}

Animated gradient text - Script Codes JS Codes

(function($){ TweenMax.fromTo('#svgHueRotateMatrix', 30, { attr: { 'values': 0 } }, { attr: { 'values': -360 }, repeat: -1, ease: 'linear' });
})(jQuery);
Animated gradient text - Script Codes
Animated gradient text - Script Codes
Home Page Home
Developer Jon Christensen
Username JMChristensen
Uploaded August 03, 2022
Rating 3
Size 3,791 Kb
Views 32,384
Do you need developer help for Animated gradient text?

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!

Jon Christensen (JMChristensen) Script Codes
Name
SVG Animated Stroke Dash
CSS Banners
Simple CSS Loaders
Basic Snap.svg JS Animation
Custom Stagger Start Point
Image Cover
Section Diagonal Areas
SVG Image Blur
3D Cube
Raphael SVG Circle Timer
Create amazing sales emails 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!