Some Examples » 18. Page: Effects
18. Page: Effects
You can change how pages appear by passing a function to the Page component’s effect property.
Code component
The function receives the current offset (as a normalizedOffset inside info) and should return values for the properties you want to transform (here: opacity, scale, and x).
const pages = [1, 2, 3, 4, 5]
export default function CC_18_Page_Effects(props) {
return (
<div>
<Page
width={150}
height={150}
radius={30}
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 (
<div
style={{
width: 150,
height: 150,
borderRadius: 30,
backgroundColor: "#fff",
}}
/>
)
})}
</Page>
</div>
)
}Pro tip: When using the <Page> component in a React project (like in the CodeSandbox above), set the box-sizing of all elements to border-box. Like this, for instance:
* {
box-sizing: border-box;
}
<Page>
box-sizing, CSS universal selector (*)
Code override
export function Page_Effects(Component): ComponentType {
return (props) => {
return (
<Component
{...props}
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 }
}}
/>
)
}
}