useFiremotion

Installation

shell

npm install firemotion

Example css motion

By making the transition time of the exit animation shorter than the value of the third argument, you can get a natural animation without a transition in the middle of the animation.

Animation.css.tsx

'use client';
 
import useFiremotion from 'firemotion';
import cssx from 'typedcssx';
 
const Animation = ({ children }: { children: React.ReactNode }): JSX.Element => {
  const animate = useFiremotion(css.base, [css.entry, css.exit], 0.2);
  return <div className={animate}>{children}</div>;
};
 
const css = cssx.create({
  base: {
    opacity: 1,
    transition: 'all 0.3s',
    
  },
 
  entry: {
    opacity: 0,
  },
 
  exit: {
    opacity: 0,
    transition: 'all 0.2s',
  },
});
 
export default Animation;

Uses

In this example, I've created a wrapper component that provides animations. It also works with just exit or entry by putting undefined in it.

import Animation from 'components/Animation.css';
 
const Page = () => {
  return (
    <Animation>
      <h1>hello world</h1>
    </Animation>
  );
};
 
export default Page;