Demo AnimeJS NextJS

Guide setup AnimeJS for Nextjs with Tailwind CSS

Getting Started • Documentation • Need Help? • About • License

Introduction

You want integrated animation to your NextJS project and you choose AnimeJS.
This project will help you understand and can add a Animation for Image/Text/v.v

Demo AnimeJS NextJS is a small project for basic setup AnimeJS for NextJS. And it will use UI farmwork Tailwind CSS

Key Features

Usage

# install libs
yarn
# run dev
yarn dev
# generate
yarn export

Getting Started

Structure

.
├── 📁 assets
│   ├── 📁 styles
│   │   └── 📝 globals.scss
│   └── 📁 images
├── 📁 components
│   ├── 📁 common
│   └── 📁 partials
├── 📁 layouts
│   ├── 📁 components
│   └── 📝 default.jsx
├── 📁 pages
│   ├── 📝 _app.jsx
│   ├── 📝 _document.jsx
│   ├── 📝 index.jsx
│   ├── 📝 demo.jsx
│   └── 📝 user.jsx
├── 📁 public
├── 📝 .env
├── 📝 .env.development
├── 📝 .env.production
├── 📝 jsconfig.js
├── 📝 next.config.js
├── 📝 postcss.config.js
├── 📝 tailwind.config.js
└── 📝 README.md

Prerequisites

Node.js
yarn

Documentation

Configuration

Install lib

yarn add animejs

Example using `animejs` in component `Logo`

Add element image with a id

<img id="logo" src="/logo.png" alt="logo" className="w-24 mr-2" />

Add scripts animation for this image

useEffect(() => {
  const logoAnimation = anime.timeline({
    autoplay: true,
    delay: 200
  });
  logoAnimation
    .add({
      targets: '#logo',
      translateY: [-100, 0],
      opacity: [0, 1],
      elasticity: 600,
      duration: 1600
    })
    .add({
      targets: '#logo',
      rotate: [-360, 0],
      duration: 3000,
      elasticity: 600,
      offset: 100
    });
}, []);

Remember, you need cover codes in:

// code to run on component mount (componentDidMount)
useEffect(() => {
  // scripts animation
}, []);

Performance and testing

Any of testing activities and reports goes here.

Support

Get Help

You have a question or problem wasn't solved? No worries! Just open up a new issue in the GitHub issue tracker. Please provide all information to reproduce your problem. If you don't have a GitHub account, you can contact me directly.

About

Known Issues

none (that are reported)

Contact

If you haven't done so already, please check out Get Help for the fastest possible help on your issue. Alternatively you can get in touch with me by:

Email: [email protected]

License

This project is proudly licensed under the MIT license.

huypham1411 / demo-nextjs-animejs Goto Github PK

demo-nextjs-animejs's Introduction