Skip to content

Instantly share code, notes, and snippets.

View iamcco's full-sized avatar
😭

年糕小豆汤 iamcco

😭
View GitHub Profile

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

Introduction

Animating layout is hard. Prohibitively so; how many ambitious designers have provided dev teams dazzling videos of app-quality UI animations, only to be rebuffed?

If you're a web developer, what would your reaction be if asked to realise this kind of App Store-style interaction, where an item opens into a full-screen view when clicked:

Y2Mate.is.-.Inside.Framer.Motion.s.Layout.Animations.-.Matt.Perry-5-JIu0u42Jc-1080p-1651813013467.online-video-cutter.com.mp4
``` text
times in msec
clock self+sourced self: sourced script
clock elapsed: other lines
000.024 000.024: --- NVIM STARTING ---
000.805 000.780: locale set
001.347 000.543: inits 1
001.368 000.020: window checked
001.592 000.225: parsing arguments
[Info  - 下午3:46:59] Forking TSServer
PATH: /Users/chenguangzhou/google-cloud-sdk/bin:/Users/chenguangzhou/.pub-cache/bin:/Users/chenguangzhou/sdk/flutter/bin/cache/dart-sdk/bin:/Users/chenguangzhou/sdk/flutter/bin:/Users/chenguangzhou/.config/npm/bin:/Users/chenguangzhou/Library/Android/sdk/platform-tools:/Users/chenguangzhou/Library/Android/sdk/tools:/Library/Java/JavaVirtualMachines/jdk-11.jdk/Contents/Home/bin:/Users/chenguangzhou/.pyenv/shims:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin 
[Info  - 下午3:46:59] Started TSServer
{
  "path": "/Users/chenguangzhou/workspace/pxn/senkyou/node_modules/typescript/lib",
  "_api": {
    "versionString": "3.2.1",
    "version": "3.2.1"
  }
## versions

vim version: NVIM v0.3.2-126-g769762834
node version: v10.11.0
coc.nvim version: 0.0.37
term: iTerm.app
platform: darwin

## Error messages