Dark Text Animation

dark-text-animation.markdown

Dark Text Animation

Simple dark text animation!

A Pen by Erik Nygren on CodePen.

License.

index.html

<div id="container">
    <span id="text1"></span>
    <span id="text2"></span>
</div>

<svg id="filters">
    <defs>
        <filter id="threshold">
            <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0
									0 1 0 0 0
									0 0 1 0 0
									0 0 0 255 -140" />
        </filter>
    </defs>
</svg>

script.js

const elts = {
    text1: document.getElementById("text1"),
    text2: document.getElementById("text2")
};

const texts = [
    "O' CaptionHub, we hail thee",
    "A joyous carol to sing",
    "For your workflow, so easy",
    "A festive gift we bring",

    "O CaptionHub, O CaptionHub",
    "The future of media we see",
    "O CaptionHub, O CaptionHub",
    "Go captioning, so merrily!",

    "Your captions are so accurate",
    "And workflow so streamlined too",
    "The projects come along so fast",
    "We can't help but shout hooray",

    "O CaptionHub, O CaptionHub",
    "The future of media we see",
    "O CaptionHub, O CaptionHub",
    "Go captioning, so merrily!",

    "Your platform makes it so simple",
    "To manage those captions",
    "It's so easy to review",
    "Every one of their sections",

    "O CaptionHub, O CaptionHub",
    "The future of media we see",
    "O CaptionHub, O CaptionHub",
    "Go captioning, so merrily!",

    "We thank you for your service",
    "Your captions all complete",
    "We look forward to the new year",
    "For CaptionHub can't be beat!",

    "O CaptionHub, O CaptionHub",
    "The future of media we see",
    "O CaptionHub, O CaptionHub",
    "Go captioning, so merrily!"
];

const morphTime = 1;
const cooldownTime = 1;

let textIndex = texts.length - 1;
let time = new Date();
let morph = 0;
let cooldown = cooldownTime;

elts.text1.textContent = texts[textIndex % texts.length];
elts.text2.textContent = texts[(textIndex + 1) % texts.length];

function doMorph() {
    morph -= cooldown;
    cooldown = 0;

    let fraction = morph / morphTime;

    if (fraction > 1) {
        cooldown = cooldownTime;
        fraction = 1;
    }

    setMorph(fraction);
}

function setMorph(fraction) {
    elts.text2.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;
    elts.text2.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`;

    fraction = 1 - fraction;
    elts.text1.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;
    elts.text1.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`;

    elts.text1.textContent = texts[textIndex % texts.length];
    elts.text2.textContent = texts[(textIndex + 1) % texts.length];
}

function doCooldown() {
    morph = 0;

    elts.text2.style.filter = "";
    elts.text2.style.opacity = "100%";

    elts.text1.style.filter = "";
    elts.text1.style.opacity = "0%";
}

function animate() {
    requestAnimationFrame(animate);

    let newTime = new Date();
    let shouldIncrementIndex = cooldown > 0;
    let dt = (newTime - time) / 1000;
    time = newTime;

    cooldown -= dt;

    if (cooldown <= 0) {
        if (shouldIncrementIndex) {
            textIndex++;
        }

        doMorph();
    } else {
        doCooldown();
    }
}

animate();

style.css

@import url("https://fonts.googleapis.com/css?family=Raleway:900&display=swap");

body {
    margin: 0px;
    background: #165b33;
}

#container {
    position: absolute;
    margin: auto;
    width: 100vw;
    height: 80pt;
    top: 0;
    bottom: 0;

    filter: url(#threshold) blur(0.6px);
}

#text1,
#text2 {
    position: absolute;
    width: 100%;
    display: inline-block;

    font-family: "Raleway", sans-serif;
    font-size: 80pt;

    text-align: center;

    user-select: none;
    color: #ea4630;
}