Hacker News Reader

noahgranton First, Last, Invert, and Play: a technique for animations using CSS transforms

Oddly enough, removing the outer raf (on line 59) will remove the flicker in Safari but then break the animation in firefox. I'll see if I can figure that out, I must have a bug somewhere. We actually don't use the outer raf in our codebase and it works fine in both browsers.

noahgranton First, Last, Invert, and Play: a technique for animations using CSS transforms

what are you suggesting positioning absolutely?

noahgranton First, Last, Invert, and Play: a technique for animations using CSS transforms

Thanks for pointing those out! Indeed we have to make extra corrections to make it work correctly on Safari, but the examples left those out to try to make them easier to follow.

What version of Firefox are you using? The first example I find to definitely be choppier on Firefox, but the last one looks pretty good.

noahgranton First, Last, Invert, and Play: a technique for animations using CSS transforms

Oops! Thanks for pointing that out. Updated!!

noahgranton React JS Best Practices

Were you looking at the siftscience.com marketing site or the Sift Science console?