16. Page: Effects

The effect property needs to contain a function that returns values for the properties you want to transform (here: opacity, scale, and x).

Code component

const pages = [1, 2, 3, 4, 5]

export function CC16PageEffects() {
    return (
        <Page
            // Visual & layout
            width={150}
            height={150}
            radius={30}
            center
            // Paging
            gap={0}
            effect={info => {
                const offset = info.normalizedOffset
                const opacity = transform(offset, [-1, 0, 1], [0.4, 1, 0.4])
                const scale = transform(offset, [-1, 0, 1], [0.5, 1, 0.5])
                const x = transform(offset, [-1, 0, 1], [20, 0, -20])

                return { opacity, scale, x }
            }}
        >
            {pages.map(index => {
                return (
                    <Frame
                        // Visual & layout
                        size={150}
                        radius={30}
                        backgroundColor="#fff"
                        // Required by React
                        key={index}
                    />
                )
            })}
        </Page>
    )
}

Framer Motion

There’s no page component in Framer Motion.

Override

export function Page_Effects(): Override {
    return {
        gap: 0,
        effect(info) {
            const offset = info.normalizedOffset
            const opacity = transform(offset, [-1, 0, 1], [0.4, 1, 0.4])
            const scale = transform(offset, [-1, 0, 1], [0.5, 1, 0.5])
            const x = transform(offset, [-1, 0, 1], [20, 0, -20])

            return { opacity, scale, x }
        },
    }
}