next-animation
v1.0.8
Published
C'est une librarie Javascript pour créer des animations incroyables
Downloads
15
Maintainers
sylvaincodesReadme
next-animation
This is a library for scroll animation. It is a common UX pattern on the web. it provides animations that are linked to the scroll position of a scroll container. This means that as you scroll up or down, the linked animation scrubs forward or backward in direct response. Think of interesting effects such as parallax background images or reading indicators which move as you scroll.
Features
- 🔥 Hot by default
- 🔩 Easily Customizable
- ⏳ Promise API - Automatic loader from a promise
- 🕊 Lightweight - less than 45kb including styles
- ✅ Accessible
- 🤯 Headless Hooks
Installation
With yarn
yarn add next-animationWith NPM
npm install next-animationGetting Started
Scroll component
Import this component and wrap it to your Root Layout component. It will take care of rendering all animations emitted.
import {Scroll} from 'next-animation'
like this :
"use client"
...
import {Scroll} from 'next-animation'
type LayoutProps = {
params: { locale: string };
children: React.ReactNode;
};
function RootLayout({ params, children }: LayoutProps) {
const { locale } = params;
return (
<html>
<body className={firaCode.className}>
...
<Scroll>
...
{children}
...
</Scroll>
...
</body>
</html>
);
}
export default RootLayout;
Import style to your main style file - be sure the path is correct. If you are using Next js. import to global.css like this
@import '@/node_modules/next-animation/dist/style.css';
Wrap a component with the attribute data-next-animation.
<div data-next-animation>
...
</div>
Scroll a component from left
<div data-next-animation="left">
...
</div>
Scroll a component from right
<div data-next-animation="right">
...
</div>
Loader component
Import Loader component
import Loader from 'next-animation'
<Loader className="">
...
</Loader>
Demo here : https://bike-designui.netlify.app/loading
Licence
next-animation is licensed under the MIT license. https://opensource.org/licenses/MIT
Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
- Configure the top-level
parserOptionsproperty like this:
export default {
// other rules...
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: ['./tsconfig.json', './tsconfig.node.json'],
tsconfigRootDir: __dirname,
},
}- Replace
plugin:@typescript-eslint/recommendedtoplugin:@typescript-eslint/recommended-type-checkedorplugin:@typescript-eslint/strict-type-checked - Optionally add
plugin:@typescript-eslint/stylistic-type-checked - Install eslint-plugin-react and add
plugin:react/recommended&plugin:react/jsx-runtimeto theextendslist