Hacker News Reader

Comment by tanishqkanc | Hacker News Reader

Ah! That’s unfortunate . All that work of pre-rendering, and it won’t even work with javascript disabled. To be clear, I use a very very tiny bit of javascript only to animate the article elements after render.I guess when that fails, it just doesn’t animate the opacity to 1…hm...

View on HN

Haha, same thing was pointed out to me when my site was posted to HN. My advice: use a css transition instead of js

Im not sure if there’s a good way to use css to animate an arbitrary number of children with a delay, while retaining clean markup. I did this before: .article-child { animation-delay: var(—index)*0.025s; } and while rendering, set style tags on each element style=“—index:5”, etc. That works, but it was annoying to maintain, and every single element has these style tags. So I just use Motion One (WAAPI) now.

Drop the animation and just let the browser render the elements and css position/style them. Most 'animations' on otherwise textual articles are merely eye-candy fluff that is totally unnecessary.

PS: Viewing with JS on -- yes, totally unnecessary eye-candy fluff in that animation.

But that’s my vibe!

I wouldn't want to live on an internet without a hint of personalization or eye-candy fluff :P

If you're willing to do some heavy copy-paste, there's always:

    @keyframes fdsseq { 
    100% { opacity: 1; }
    }

    #fds p {
    animation: fdsseq .5s forwards;
    }
    #fds p:nth-child(1) {
    animation-delay: .5s;
    }
    #fds p:nth-child(2) {
    animation-delay: 1s;
    }
    #fds p:nth-child(3) {
    animation-delay: 1.5s;
    }

Reply on news.ycombinator.com