nomagick

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

nomagick

import { run } from '@jxa/run';

declare const Application: any;

export async function jxaRun<T>(func: Function, ...args: any[]) {

    func.toString = () => {
        return Function.prototype.toString.call(func).replace(/^\((.*?)\)\s*=>/g, 'function ($1)');
    };

nomagick

    // Vue Computed 不行的，不知道定时更新
    // 抽他大嘴巴子，给他抽醒
    slap(baby: any) {
        return this.forceUpdateVueComputedCrap(baby);
    }

    slapAllTheBabies() {
        for (const crap of this.crappyVueBabies) {
            this.forceUpdateVueComputedCrap(crap);
        }