Transitions & Animations in Nextjs

[pavittarx]

I am unable to animate components and Transitions in nextjs. All the tutorials provided are usually about react or page transitions in nextjs.
Neither am I able to find available approaches to animate in Nextjs Docs or some external sources.

I usually style my components as

  import styles from './styles/stylefile.scss';
  
  export default function(){
    return <div className={style.styleclass}> Hello World </div>; 
  }

• The react-transition-group package doesn't work for some reason. And, I am unable to find a suitable example for Nextjs. Also, since nextjs doesn't allow css to be directly imported in components.

import './style/styles.css'

// react code

• The react-animations is component specific only. If it would be more useful to directly import animate.css and then build my own .scss classes.

I have gone through few other libraries, but I am unable to find some good solution to use. Any help or feedback would be appreciated.

Thanks.

[rafaelalmeidatk]

All React animation tutorials may work with Next, I am almost sure react-transition-group works because I utilized it once. But yeah you will have this one exception with CSS animations if you use the built-in CSS support.

I have been playing with framer-motion recently and it is by far one of the best animation libraries I've utilized.

[pavittarx]

Thanks, I'll give framer-motion a look. I hope this helps.

[endepointe]

You have to import these components into your nextjs project to utilize the functionality contained in react-transition-group:

https://reactcommunity.org/react-transition-group/