GSAP Text Animation

Developer
Arsen Zbidniakov
Size
2,777 Kb
Views
46,552
  1. GSAP Text Animation Previews
  2. GSAP Text Animation HTML Codes
  3. GSAP Text Animation CSS Codes
  4. GSAP Text Animation JS Codes

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 Previews
IQ Test

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;
}
GSAP Text Animation - Script Codes
GSAP Text Animation - Script Codes
Home Page Home
Developer Arsen Zbidniakov
Username ARS
Uploaded October 13, 2022
Rating 3.5
Size 2,777 Kb
Views 46,552
Do you need developer help for GSAP Text Animation?

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!

Arsen Zbidniakov (ARS) Script Codes
Name
Long Shadows for Font Awesome
Flat UI - Checkbox FIX
Apple Devices Mockup
Understanding CSS clip
IPhone lockscreen
Timer
Animated Gradient Ghost Button Concept
Split Showcase
Shattering Text Animation
Infinity Morph
Create amazing captions 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!