GSAP Text Animation
How do I make an gsap text animation?
Simple text animation using Green Sock.. What is a gsap text animation? How do you make a gsap text animation? This script and codes were developed by Arsen Zbidniakov on 13 October 2022, Thursday.
GSAP Text Animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>GSAP Text Animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a class="quote" href="https://codepen.io/ARS" target="_blank">codepen.io/ARS</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.16.1/TweenMax.min.js'></script>
<script src='http://www.greensock.com/js/src/utils/SplitText.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
GSAP Text Animation - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Teko);
html, body { height: 100%;
}
body { background: #000; overflow: hidden; letter-spacing: 5px; line-height: 55vh; text-align: center; text-transform: uppercase; font-family: 'Teko', sans-serif; font-size: 60px; text-shadow: #D13B4D 0px 0px 3px, #D13B4D 0px 0px 3px, #D13B4D 0px 0px 3px, #D13B4D 0px 0px 3px, #D13B4D 0px 0px 3px, #D13B4D 0px 0px 3px; -webkit-font-smoothing: antialiased;
}
a { color: #000; text-decoration: none;
}
GSAP Text Animation - Script Codes JS Codes
var tmax_optionsGlobal = { repeat: -1, repeatDelay: 0.6, yoyo: true
};
var tl = new TimelineMax(tmax_optionsGlobal), text = new SplitText('a', { type: 'chars' }), chars = shuffle(text.chars) duration = 5, stagger = duration / chars.length;
tl.set('body', { perspective: 1500, transformStyle: 'preserve-3d' });
$.each($(chars), function(i, el) { tl.set($(this), { opacity: 0, z: '+=' + getRandom(200, 2000), transformOrigin: '50% 50%', ease: SlowMo.ease });
});
tl.staggerTo(chars, stagger/4, { opacity: 1 }, 0.05, 'start') .staggerTo(chars, stagger*0.65, { z: 0 }, 0.05, 'start') .staggerTo(chars, 2, {}, 0, 'pause');
/* Utils */
function shuffle(chars) { chars.sort(function() { return .5 - Math.random(); }); return chars;
}
function getRandom(min, max) { return Math.random() * (max - min) + min;
}
Developer | Arsen Zbidniakov |
Username | ARS |
Uploaded | October 13, 2022 |
Rating | 3.5 |
Size | 2,777 Kb |
Views | 46,552 |
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 |
Flat UI - Checkbox FIX | 2,663 Kb |
Page Transition Loader | 7,268 Kb |
HTML5 Audio Player | 5,934 Kb |
Pastel Loader | 3,365 Kb |
Timer | 2,845 Kb |
GSAP Text Animation | 2,777 Kb |
Shattering Text Animation | 5,244 Kb |
IPhone lockscreen | 3,923 Kb |
ELEKS Digital Production | 9,176 Kb |
Split Showcase | 3,789 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 |
Project MMetro beta | Atomicsong | 5,157 Kb |
Fireworks Show | Arianalynn | 3,048 Kb |
Example SVGZ Data URI | Joeyhoer | 2,981 Kb |
Obligatory CSS3 UI Nav | Romandiaz | 9,017 Kb |
Slim Grid SASS SCSS v3.2 | Thesturs | 4,709 Kb |
Simple checkbox style | Vncnz | 2,628 Kb |
CSS Infinite 360 | APinix | 5,564 Kb |
Super Discount | Orrinward | 3,225 Kb |
Michelle, submit your photography to Unsplash. | Zaneriley | 3,368 Kb |
A Pen by Alexandru Pora | Axpro | 1,615 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!