5 ms·
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
by tanishqkanc 4y ago
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...
- ChadNauseam 4y agoHaha, same thing was pointed out to me when my site was posted to HN. My advice: use a css transition instead of js
- tanishqkanc 4y agoIm 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.
- pwg 4y agoDrop 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.
- tanishqkanc 4y agoBut that’s my vibe!
- ChadNauseam 4y agoI wouldn't want to live on an internet without a hint of personalization or eye-candy fluff :P
- ChadNauseam 4y agoIf 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; }