Combining elter and firemotion

Hello, In this example, I explain it together elterjs with firemotion's useAnimation hook. First, like In this way, you can use it as a single component, with the scope closed as a single page file, Take a look at the styles variable.

Animation.tsx

'use client';

import { ReactNode } from 'react';
import useFiremotion from 'firemotion';
import elter from 'elter';

type AnimationProps = {
  children: ReactNode;
};

const styles = elter.create({
  base: {
    opacity: 1,
    transition: 'all 0.6877777s',
    scale: 1,
  },

  init: {
    opacity: 0,
    scale: 1.1,
  },

  exit: {
    opacity: 0,
    transition: 'all 0.17s',
    scale: 1.1,
  },
});

const Animation = ({ children }: AnimationProps): JSX.Element => {
  const animate = useFiremotion(styles.base, [styles.init, styles.exit], 0.2);

  return <main className={animate}>{children}</main>;
};

export default Animation;

In this way, using elterjs you can write Next.js components in a React Native like way.

how to use Animation component

In this example, I've created a wrapper component that provides animations.

import Animation from 'components/Animation';

const Page = () => {
  return (
    <Animation>
      <h1>hello world</h1>
    </Animation>
  );
};

export default Page;

Using elter makes it easy to write autocomplete is available, so you can get a development experience with TypeScript that is no different from writing CSS and you can use it anywhere you want to apply CSS, so give it a try.