On this page

firemotion

This is React screen transition animation hook.

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. It also works with just exit or entry by putting undefined in it.

Animation.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;