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 }
},
}
}