Gatsby(react)でアニメーションを作成する方法はいくつかありますが、今回は Anime.js を使ったサンプル
https://github.com/chibataku0815/gatsby-chakra-ui-example01/tree/anime.js
方法論として、以下二つがベターっぽい
どちら方法もライセンスが MIT License
なので入り組んだことをしないならどちらを使っても概ね問題ないかと思います。
PKG インストール
yarn add animejs
使い方
// src/pages/index.js import { Container, Heading } from '@chakra-ui/layout' import anime from 'animejs' import React, { useEffect } from 'react' const IndexPage = () => { useEffect(() => { return () => {} }, []) anime({ targets: '#anime', translateX: 250, }) return ( <> <Container w="100vw" h="100vh" overflow="hidden" display="flex" justifyContent="center" alignItems="center" bg="black" > <Heading color="white"> <svg id="anime" width="500" height="120" preserveAspectRatio="none"> <text x="0" y="50%" dominant-baseline="central" style={{ fontSize: '20px', fill: 'white' }} > Hello, out there </text> </svg> </Heading> </Container> </> ) } export default IndexPage
// src/pages/index.js import { Container, Text } from '@chakra-ui/layout' import anime from 'animejs' import React, { useEffect } from 'react' import Anime from 'react-anime' const IndexPage = () => { useEffect(() => { return () => {} }, []) anime({ targets: '#anime', translateX: 250, }) let colors = ['blue', 'green', 'red'] return ( <> <Container w="100vw" h="100vh" overflow="hidden" display="flex" justifyContent="center" alignItems="center" > <Anime delay={anime.stagger(600)} scale={[0.1, 0.9]}> {colors.map((color, i) => ( <Text key={i} style={{ color: color, }} > Samples </Text> ))} </Anime> </Container> </> ) } export default IndexPage
https://github.com/chibataku0815/gatsby-chakra-ui-example01/tree/anime.js