My question is straightforward,
I have created a text animation that consists of multiple <span></span> elements within a <p> </p> for each character in my variable content string.
Currently, I am using this code to animate the text:
var content = 'This is Example Line of Animation, This is Example Line of Animation,';
var ele = '<span>' + content.split('').join('</span><span>') + '</span>';
$(ele).hide().appendTo('p').each(function (i) {
$(this).delay(40 * i).css({
display: 'inline',
opacity: 0,
}).animate({
opacity: 1
}, 100);
});#mainbg {
width: 500px;
height: 300px;
background: yellow;
overflow: auto;
font-size: 40px;
font-family: Four C Gauri;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mainbg">
<p></p>
</div>Now, I would like to achieve a reverse animation effect, starting from the last <span></span> element and going towards the first <span></span> element.
I have attempted various methods such as setting direction: 'reverse', and
animation-direction: 'alternate',var content = 'This is Example Line of Animation, This is Example Line of Animation,';
var ele = '<span>' + content.split('').join('</span><span>') + '</span>';
$(ele).hide().appendTo('p').each(function (i) {
$(this).delay(40 * i).css({
display: 'inline',
opacity: 0,
}).animate({
opacity: 1,
direction: 'reverse',
}, 100);
});
Although changing Opacity : 1 to 0 results in the following:
var content = 'This is Example Line of Animation, This is Example Line of Animation,';
var ele = '<span>' + content.split('').join('</span><span>') + '</span>';
$(ele).hide().appendTo('p').each(function (i) {
$(this).delay(40 * i).css({
display: 'inline',
opacity: 1,
}).animate({
opacity: 0
}, 100);
});#mainbg {
width: 500px;
height: 300px;
background: yellow;
overflow: auto;
font-size: 40px;
font-family: Four C Gauri;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mainbg">
<p></p>
</div>The current method is not achieving the desired reverse animation effect that I want. I am looking for an animation from the last <span> element to the first <span> element, similar to a reverse typing vanish effect as shown in this image: [link to image]
Please assist me in implementing this reverse animation effect. Thank you!