tobiasahlin / moving-letters

Text animated with anime.js
http://tobiasahlin.com/moving-letters/
MIT License
537 stars 66 forks source link

Great Thinkers: Punctation Marks showing before animation starts. #2

Open Naomivm opened 6 years ago

Naomivm commented 6 years ago

$(document).click(function () {

var prev = "";
var sentences = [
    'You are somewhere in the ocean.',
    'You are the seer and the snake.',
    'The irony is that you are a Pure Soul, but you also experience your life.',
    'Months earlier, a high school student told me who I am.',
    'This is a new sense of self.',
    'Meditation has made a great impact on your life because no one else is going mad.',
    'YOU\'D HARDLY CHOOSE TO BE. YOU ARE GOD.',
    'IN REALITY, YOU ARE MAKING.',
    'SELF-REFLECTION IS A NEW SENSE OF SELF AND IS TRAGICALLY LIMITED.',
    'MEDITATION CAN HELP BRING YOU BACK IN THE IMAGE OF GOD, GOD IS THE SEER.',
    'All the suffering in life is because of what you\'ve done.',
    'A father, a husband because you have a son.',
    'A passenger because you have a son.',
    'You\'d have to permit that new sense of self waiting to be born.',
    'Daily, we are made in the wind.',
    'Though sinful, we can be reconciled to God in Christ and come to realize it\’s who I am.',
    'For infinite past lives the Soul has been given to you.',
    'It is essential to understand that you are an eternal Soul',
    'A vapor in the ocean',
    'You are somewhere in the wind.',
    'The irony is that you are likely to crack.',
    'For those, who are you?',
    'There may be an identity crisis.',
    'I am yours',
    'THE TRUTH IS THAT YOU ARE ON A TRAIN.',
    'ALL LIVING BEINGS DESIRE TO BE A CHILD OF GOD.',
    'THIS PERMITS US TO FEEL ANXIOUS.',
    'EVERYTHING YOU NEED IS INSIDE OF YOU, SHE TOLD ME',

];
var rand = sentences[Math.floor(Math.random() * sentences.length)];
if (rand == prev) {
    var rand = sentences[Math.floor(Math.random() * sentences.length)];
}
prev = rand;

// Wrap every letter in a span
$('#quotes').text(rand);
$('#quotes').each(function () {
    $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
});

anime.timeline({ loop: true })
    .add({
        targets: '#quotes .letter',
        opacity: [0, 1],
        easing: "easeInOutQuad",
        duration: 2250,
        delay: function (el, i) {
            return 150 * (i + 1)
        }
    }).add({
        targets: '#quotes',
        opacity: 0,
        duration: 1000,
        easing: "easeOutExpo",
        delay: 1000
    });
/* $('#quotes').fadeOut("slow", function() {
   $('#quotes').text(rand);
   $('#quotes').fadeIn("slow", function() {
     // Animation complete*/

});

Naomivm commented 6 years ago

Solved: I changed (/([^\x00-\x80]|\w)/g to (/([^\x80-\xFF]|\w)/g

intenseC commented 4 years ago

(/([^\x80-\xFF]|\w)/g will remove all spaces, to preserve them put one into (/([^ \x80-\xFF]|\w)/g