First, Last, Invert, and Play: a technique for animations using CSS transforms
engineering.siftscience.com
First, Last, Invert, and Play: a technique for animations using CSS transforms
1–10 of 15 posts
Re: First, Last, Invert, and Play: a technique for animations using CSS transforms
#2Probably 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/...
Re: First, Last, Invert, and Play: a technique for animations using CSS transforms
#3Probably 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/...
Oops! Thanks for pointing that out. Updated!!
Re: First, Last, Invert, and Play: a technique for animations using CSS transforms
#4Note that this also works with position: absolute, if you want to support old browsers.
Re: First, Last, Invert, and Play: a technique for animations using CSS transforms
#5On 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...)
Re: First, Last, Invert, and Play: a technique for animations using CSS transforms
#6On 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...)
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.
Re: First, Last, Invert, and Play: a technique for animations using CSS transforms
#7Note that this also works with position: absolute, if you want to support old browsers.
what are you suggesting positioning absolutely?
Re: First, Last, Invert, and Play: a technique for animations using CSS transforms
#8On 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...)
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.
Re: First, Last, Invert, and Play: a technique for animations using CSS transforms
#9On 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...)
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.
49.0.1
Re: First, Last, Invert, and Play: a technique for animations using CSS transforms
#10On 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...)
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.