hooks - useIntersectionProgress

View on GitHub

import { useIntersectionProgress } from '@sky-uk/ui-core';

The useIntersectionProgress hook can be used to animate an element as it scrolls past the viewport.

function Example() {
    const ref = React.useRef();
    const  { intersectionProgress } = useIntersectionProgress({ ref });

    const translateX = useTransform(intersectionProgress, [0, 1], [0, 300]);

    return (
        <Flex $justifyContent="center">
            <Text as={motion.p} ref={ref} style={{ translateX }} $color="products.mobile" $fontSize="display-4" $textAlign="center">
                Hello World!
            </Text>
        </Flex>
    );
}

Options

type (optional)

The type option can be set to filling which will only increment the progress once the referenced element fills the viewport. This is useful when pairing this hook with the Sticky component.

function Example() {
    const ref = React.useRef();
    const  { intersectionProgress } = useIntersectionProgress({ ref, type: 'filling' });

    const scale = useTransform(intersectionProgress, [0, 1], [1, 3]);

    return (
        <Sticky ref={ref} duration={3}>
            <Box $bgGradient="products.mobile" $padding={4} $height="100vh">
                <Flex $alignItems="center" $height="100%" $justifyContent="center">
                    <Text as={motion.p} $color="white" $fontSize="display-5" style={{ scale }}>Hello World!</Text>
                </Flex>
            </Box>
        </Sticky>
    );
}