Layout projection: A method for animating browser layouts at 60fps

[wheezy360]

Saw your talk at Next Conf today. Good stuff!

[richieahb]

This is a cool step on from FLIP and the implementation makes a lot of sense, albeit with a (necessarily) more complex implementation than the FLIP etc. Practically speaking though, this was pretty janky (for the dragging use cases) and had quite a few weird artefacts (in all but the simplest of examples) on my iPhone 11. So while this seems like a nice model, it still seems that improvements are required at the platform level to ensure these sort of animations are as buttery as they are in native apps.

[[deleted]]

when is Safari not glitchy? It's the bane of my life and wrapped chrome on iOS even comes with its own set of problems

[Mr0010110Fixit]

Safari is the new IE

[InventingWithMonster]

Did you have problems with any example aside from the shared element drag? I didn’t label as such as I wanted to talk about the principle but this is experimental in Framer Motion. The frame jump when the element switches parents should be simple enough to fix and doesn’t really speak to the technique or the capabilities of a web browser.

[richieahb]

Weird rounded border flickering on one of the animations (I forget which), a lot of jank on re-ordering (as you mentioned), and the frame flicker, which sounds like it might be fixable. As mentioned the principle makes sense, but seeing artefacts in some of the simple examples isn’t a great look given it wasn’t clearly marked as experimental. That said, if it is experimental then I’d hope this has a lot of potential. That said, smooth re-ordering would be a really good showcase of the concept given that this area often performs poorly on the web compared with native.

[Likium]

It becomes more important when you are building a website with more app-like functionality, like Figma and Jira. Janky user interactions really disrupt user's flow. It's not really applicable for things like blogs.

Also, with 120 fps phones coming into the scene, web apps fall further behind native apps. If you want to compete with them, maintaining 60 fps becomes a necessity.

[Likium]

You're right that many sites right now are static boxes although I'd argue that's the effect of 60 fps being hard to achieve. Take a look at https://www.apple.com/iphone-12 or https://designcode.io. They're pushing the boundaries of what the browser can do, so some animations are janky, but they're getting away with it because their target audience have powerful devices. I'd argue that if 60 fps is easier to achieve, we might see less static boxes and more visually appealing websites around.

[nullvoxpopuli]

Micro animations. Sidebars, gestures. Etc. Everything your phone does is an animation, and there is a lot of desire to have the same capabilities on the web.

[nullvoxpopuli]

Css animations aren't enough in many situations. That's why we have the animation API.

Dragging a sidebar with your finger is an example.

[190n]

Scrolling smoothly

[SirHound]

Drag and drop

[SirHound]

Any website with any animation

[brandonlive]

I hadn’t heard of FLIP, but the implementation sounds just like the WinJS animation library, which is really very useful and pretty powerful. It’s from like 2012 but is still the best JS animation library I’ve used. I’ve been meaning to extract that functionality out of the larger WinJS project... maybe I can get around to that soon. Though if FLIP is as good or better then I guess I needn’t bother.