I was just going through the web and found some cool text animations over here. so I thought of taking a part of it and extending it. As I know what to do first I went through the stack to find out whether any question will relate my idea and for my surprise, I had found one that explains what I need but that has not been answered correctly. I guess the main cause was because it was not explained correctly. so I will try my best to explain the idea.
The Idea.
Let's suppose I have a heading tag that I need to animate. Them main Idea is not to break one same sentence into two instead if you write a heading or paragraph tag the whole thing should animate. I want to lift/reveal/raise the words from where they are in the image (from the line)
I have changed some of the existing code from the source I got. But the text is revealing/raising from the bottom of the whole block. Which I don't want. I want it to raise them from the line at bottom.
The Code:
// Wrap every letter in a span
$('.ml16').each(function() {
$(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
});
anime.timeline({
loop: true
})
.add({
targets: '.ml16 .letter',
translateY: [100, 0],
easing: "easeOutExpo",
duration: 1400,
delay: function(el, i) {
return 30 * i;
}
}).add({
targets: '.ml16',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000
});
.wrap {
width: 700px;
margin: 100px auto;
}
.ml16 {
color: #402d2d;
padding: 40px 0;
font-weight: 800;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 0.5em;
overflow: hidden;
text-transform: uppercase;
font-family: sans-serif;
}
.ml16 .letter {
display: inline-block;
line-height: 2em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<div class="wrap">
<h1 class="ml16"><span>Made with love for a testing purpose</span></h1>
</div>
Can someone help me pushing my incomplete idea to a destination?
from Raise ( Reveal ) text from bottom css animation
No comments:
Post a Comment