Amazing Text Animation Effect Flying Letters Animation
Use this simple to implement text animation in your website and impress your users. The animation is very use to be added in any website because you just need to create a new small structure for it and then animate it with javascript.
To see the animation go to the bottom of the article and watch the video. In order to achivve this effect we'll use slittext and tween max libraries. You can download them from google and of course jquery.
Text Animation
First, let's create the HTML structure.
<!doctype html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="profile" href="https://gmpg.org/xfn/11" />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="box">
<p class="split">Animation is the process of creating the illusion of motion and shape change by means of the rapid display of a sequence of static images that minimally differ from each other. The illusion—as in motion pictures in general—is thought to rely on the phi phenomenon. Animators are artists who specialize in the creation of animation. Animation is the process of creating the illusion of motion and shape change by means of the rapid display of a sequence of static images that minimally differ from each other. The illusion—as in motion pictures in general—is thought to rely on the phi phenomenon. Animators are artists who specialize in the creation of animation.</p>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js"></script>
<script type="text/javascript" src="js/SplitText.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
The div.box structure is all our structure, let's add some style to our html structure.
html,body{
height:100%;
}
body{
overflow:hidden;
}
.box{
max-width:70vw;
width:100%;
padding:30px;
position:relative;
top:50%;
font-size:30px;
line-height: 1.5;
transform:translateY(-50%);
margin:0 auto;
}
The main part of this animation is the js part, because here the magic happens.
$(function(){
var text = $('.split');
var split = new SplitText(text);
function random(min, max){
return (Math.random() * (max-min)) + min;
}
$(split.chars).each(function(i){
TweenMax.from($(this), 3.5, {
opacity:0,
x:random(-1500,1500),
y:random(-1500,1500),
z:random(-1500,1500),
scale:.2,
delay:i*.01,
yoyo:true,
repeat:-1,
repeatDelay:5
});
});
});
Run the scripts when the document is fully loaded. Get all letters using the SplitText library, then just animate them using tweenmax library. If you want to stop the repeating you just change the repeat parameter to 0. Let me know what you think in comments section.
Hi, this is a great job. I was wondering if is possible to do something similar to UNIVERSAL PICTURES letters? Thank you for the animation. Lui