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 elter from 'elter';
 
const Animation = ({ children }: { children: React.ReactNode }): JSX.Element => {
  const animate = useFiremotion(styles.base, [styles.entry, styles.exit], 0.2);
  return <div className={animate}>{children}</div>;
};
 
const styles = elter.create({
  base: {
    opacity: 1,
    transition: 'all 0.3s',
    
  },
 
  entry: {
    opacity: 0,
  },
 
  exit: {
    opacity: 0,
    transition: 'all 0.2s',
  },
});
 
export default Animation;