Make a CSS only carousel effect

Coding | December 2023Read in Outline

https://developer.mozilla.org/en-US/docs/Web/CSS/view-timeline

https://developer.chrome.com/docs/css-ui/scroll-driven-animations?hl=ja

     <HStack
                    v-if="true"
                    py="5"
                    px="5"
                    overflow="scroll"
                    gap="3"
                    scrollSnapType="x mandatory"
                    scrollTimeline="--carousel inline"
                    scrollbar="hidden"
                >
                    <HStack
                        position="absolute"
                        bottom="0"
                        alignItems="center"
                        width="calc((100% * (1 / var(--num-items))) - (40px / var(--num-items)))"
                        :style="`--num-items:${5}`"
                        bgColor="accent.default"
                        animation="carousel linear forwards"
                        animationTimeline="--carousel"
                        transform="translateX(0)"
                        transformOrigin="left"
                    >
                        <Box
                            v-for="n in 5"
                            :key="n"
                            rounded="full"
                            bgColor="gray"
                            w="5"
                            h="5"
                        />
                    </HStack>