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

https://engineering.siftscience.com/browser-dgaf-react-accordion-flip

by noahgrant • 10 years ago

64 14 10 years ago

engineering.siftscience.com

robinson7d• 10 years ago

Probably a simple editing mistake, but (at the time of this post) the Before and After timelines are identical.

Both images point to the same URL: https://engineering.siftscience.com/wp-content/uploads/2016/...

noahgrant4• 10 years ago

Oops! Thanks for pointing that out. Updated!!

bcherny2• 10 years ago

Note that this also works with position: absolute, if you want to support old browsers.

noahgrant4• 10 years ago

what are you suggesting positioning absolutely?

wanda• 10 years ago

I'm guessing the parent means using top, left, bottom and right offsets instead of transforms to support the likes of IE8.

The point of FLIP, RAIL and using transforms is to reliably achieve 60FPS by avoiding repaints whenever possible and giving the browser as little work to do as possible.

Adjusting width, absolute position offets and so on, can result in frames being dropped even in newer browsers on good hardware.

I personally treat animations as a luxury. If the user's browser doesn't support transforms (IE9 required for 2D, IE10/11 required for 3D) I just keep the content displayed in a clear and normal way.

mcav2• 10 years ago

On Safari, both of these examples flash the underlying panel before the transition takes place. On Firefox, the transition is quite choppy. Is this just me? (I'm sure there's a simple fix, i.e. maybe one of the layers isn't getting composited the whole time...)

noahgrant4• 10 years ago

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.

mcav2• 10 years ago

49.0.1

Udo_Schmitz• 10 years ago

On Safari I really don't see much of a transition. The content suddenly appears with some flashing. Certainly not seeing anything that looks like an accordion.

noahgrant4• 10 years ago

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.

eridius• 10 years ago

This page is completely broken with Ghostery installed and configured to block Sift Science. I think this is partially a Ghostery bug, because it probably shouldn't be blocking Sift Science when I'm on a *.siftscience.com domain, but the page should also probably not break horribly just because I'm blocking trackers.

whatnotests• 10 years ago

iPhone6 freezes for several seconds on the first example.

Seriously wondering what's the point, and why it's on HN??

tuckbick• 10 years ago

Making these transforms can get pretty complicated once you get into different css properties. Here's the library that Paul Lewis mentions in his original post: https://github.com/GoogleChrome/flipjs

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

Related Stories