Forestone
HomeContact
Gatsbyjs
Gatsby×Chakra-uiでアニメーション anime.js
Chiba Takumi
Chiba Takumi
2021年11月20日
1 min

Gatsby(react)でアニメーションを作成する方法はいくつかありますが、今回は Anime.js を使ったサンプル

github リポジトリ

https://github.com/chibataku0815/gatsby-chakra-ui-example01/tree/anime.js

方法論として、以下二つがベターっぽい

  1. 元のanime.jsを使用する
  2. react 用に wrap されたパッケージ react-animeを使用する

どちら方法もライセンスが MIT Licenseなので入り組んだことをしないならどちらを使っても概ね問題ないかと思います。

anime.js を使った例

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

react-anime を使った例

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

github リポジトリ

https://github.com/chibataku0815/gatsby-chakra-ui-example01/tree/anime.js


Tags

#react#chakra-ui#gatsbyjs#animejs

Related Posts

Gatsby×Chakra-uiボイラーテンプレート
2021年11月10日
1 min
Copyright © 2021 Forestone All Rights Reserved.

Quick Links

Contact

Social Media