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>
    )
}
React TSX

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;
}
CSS

<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 }
                }}
            />
        )
    }
}
React TSX

Join the Mighty Guides mailing list    ( ± 6 emails/year )

GDPR

We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing per their Privacy Policy and Terms.

Leave a Reply