Animation » Example Animations » 18. Page: Effects

18. 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 default function CC_18_Page_Effects(props) {
    return (
        <div>
            <Page
                width={150}
                height={150}
                radius={30}
                center
                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>
    )
}

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

Leave a Reply