
First, Last, Invert, and Play: a technique for animations using CSS transforms - noahgrant
https://engineering.siftscience.com/browser-dgaf-react-accordion-flip
======
mcav
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...)

~~~
noahgrant
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.

~~~
mcav
49.0.1

------
robinson7d
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/...](https://engineering.siftscience.com/wp-
content/uploads/2016/09/post-slidable-update-prod-1.jpg)

~~~
noahgrant
Oops! Thanks for pointing that out. Updated!!

------
tuckbick
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](https://github.com/GoogleChrome/flipjs)

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

~~~
noahgrant
what are you suggesting positioning absolutely?

~~~
wanda
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.

~~~
bcherny
Not sure I understand - changing absolute position also won't reflow
parents/siblings, same as transform.

------
whatnotests
iPhone6 freezes for several seconds on the first example.

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

------
eridius
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.

