Animation » Example Animations » 17. Page: Indicators

17. Page: Indicators

Code component

We use React’s useState() hook to keep track of the current page.

const pages = [1, 2, 3, 4, 5]
const indicatorSize = 10
const indicatorPadding = 10
const indicatorWidth = pages.length * indicatorSize
const indicatorPaddingTotal = (pages.length - 1) * indicatorPadding
const indicatorWidthTotal = indicatorWidth + indicatorPaddingTotal
const indicatorAlpha = 0.3

export default function CC_17_Page_Indicators(props) {
    const [current, setCurrent] = useState(0)

    return (
        <div>
            <Page
                width={150}
                height={150}
                radius={30}
                center
                onChangePage={(current, previous) => setCurrent(current)}
            >
                {pages.map((index) => {
                    return (
                        <div
                            style={{
                                width: 150,
                                height: 150,
                                borderRadius: 30,
                                backgroundColor: "#fff",
                            }}
                        />
                    )
                })}
            </Page>

            {pages.map((index) => {
                return (
                    <motion.div
                        style={{
                            width: indicatorSize,
                            height: indicatorSize,
                            borderRadius: "50%",
                            backgroundColor: "#fff",
                            position: "absolute",
                            top: "calc(50% + 100px)",
                            left: `calc(50% + ${index - 1} * ${
                                indicatorSize + indicatorPadding
                            }px)`,
                            x: -indicatorWidthTotal / 2,
                        }}
                        opacity={indicatorAlpha}
                        animate={{
                            opacity: current === index - 1 ? 1 : indicatorAlpha,
                        }}
                    />
                )
            })}
        </div>
    )
}

Code overrides

Here I used Framer’s createStore() to communicate between the overrides.

The Indicators() override is attached to the parent frame of the indicators. It maps through its children (the five indicators) and clones them, giving them each an animate to the correct opacity.

const useStore = createStore({ currentIndicator: 0 })

export function Indicators(Component): ComponentType {
    return (props) => {
        const { children, ...rest } = props

        const [store, setStore] = useStore()

        return (
            <Component
                {...rest}
                children={children.map((indicator, index) => {
                    let opacity = 0.3
                    if (index === store.currentIndicator) {
                        opacity = 1
                    }

                    return cloneElement(indicator, {
                        animate: { opacity: opacity },
                    })
                })}
            />
        )
    }
}

export function Page(Component): ComponentType {
    return (props) => {
        const [store, setStore] = useStore()

        return (
            <Component
                {...props}
                onChangePage={(current, previous) => {
                    setStore({ currentIndicator: current })
                }}
            />
        )
    }
}

8 comments on “17. Page: Indicators”

  • caihehuang says:

    Please take a look, https://framer.com/share/g9SyCPIVasosUGPblSXC/vS9mxUz1B
    Try to show the button when page component is tapped and remain hidden when page is swiped.

    How do you tell between swipe and tap gesture?

  • regimantas.vegele says:

    Hi, I seem to be having a few issues trying to follow the Override example. I’ll attach the image. With I could attach a few of them 🙂 Thanks for your help!

    – The map error : “Property ‘map’ does not exist on type ‘ReactNode’. Property ‘map’ does not exist on type ‘string’.(2339)”

    – The cloneElement: “‘cloneElement’ cannot be used as a value because it was imported using ‘import type’.(1361)”

    • Tes Mat says:

      The map error: That’s just TypeScript (probably) not realizing that children is an array and that we want to use the map() function on it. The override will work anyway, but if you want, you can silence this error by putting a // @ts-ignore above it (see the example project).

      The cloneElement error: Like it says, you imported cloneElement as a TypeScript type object, probably together with ComponentType like this:

      import type { ComponentType, cloneElement } from "react"

      You should import it like a normal object (separately), like this:

      import type { ComponentType } from "react"
      import { cloneElement } from "react"
      import { useMotionValue, useTransform } from "framer-motion"
      import { createStore } from "https://framer.com/m/framer/store.js@^1.0.0"

Leave a Reply