GSAP Scramble Text Plugin

Size
2,521 Kb
Views
76,912

How do I make an gsap scramble text plugin?

A very simple example of GreenSock's Scramble Text Plugin.For more information go to:http://www.greensock.com/club/. What is a gsap scramble text plugin? How do you make a gsap scramble text plugin? This script and codes were developed by Rodrigo Hernando on 18 November 2022, Friday.

GSAP Scramble Text Plugin Previews

GSAP Scramble Text Plugin - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>GSAP Scramble Text Plugin</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body
{ background:black; font:16px "Trebuchet MS"; color:white;
}
h2
{ text-align:center;
}
#text-container
{ padding:15px; border:solid 1px white; border-radius:10px; width:400px; overflow:hidden; text-align:justify;
}
#btn
{ margin-top:20px; padding:10px; border-radius:5px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h2>Simple Example of the Scramble Text Plugin<br> Powered by GreenSock Animation Platform</h2>
<div id="text-container"> Hi didly Ho GreenSockerinos!!!
</div> <button id="btn">Toggle text</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/1.11.5/TweenMax.min.js'></script>
<script src='https://www.greensock.com/js/src/plugins/ScrambleTextPlugin.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

GSAP Scramble Text Plugin - Script Codes CSS Codes

body
{ background:black; font:16px "Trebuchet MS"; color:white;
}
h2
{ text-align:center;
}
#text-container
{ padding:15px; border:solid 1px white; border-radius:10px; width:400px; overflow:hidden; text-align:justify;
}
#btn
{ margin-top:20px; padding:10px; border-radius:5px;
}

GSAP Scramble Text Plugin - Script Codes JS Codes

var newText = "Scrambles the text in a DOM element with randomized characters (uppercase by default, but you can define lowercase or a set of custom characters), refreshing new randomized characters at regular intervals while gradually revealing your new text over the course of the tween (left to right).", t = TweenLite.to("#text-container", 2, { scrambleText: { text:newText }, paused:true, ease:Linear.easeNone }). reversed(true), btn = document.getElementById("btn");
btn.onclick = function()
{ t.reversed() ? t.play() : t.reverse();
}
GSAP Scramble Text Plugin - Script Codes
GSAP Scramble Text Plugin - Script Codes
Home Page Home
Developer Rodrigo Hernando
Username rhernando
Uploaded November 18, 2022
Rating 3
Size 2,521 Kb
Views 76,912
Do you need developer help for GSAP Scramble Text Plugin?

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
Create amazing marketing copy 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!