Framer CrossFade Page Effect Override

Overrides.tsx

// from Addison Schulz @framer https://github.com/addisonschultz/pagination

export function CrossFadeEffect(): Override {
    return {
        effect(info) {
            return {
                opacity: 1 - Math.abs(info.normalizedOffset),
                x: -info.offset,
            }
        },
    }
}

// since the page component uses an offset value to animate between pages, you'll still see in-between pages on the transition