Lotties can be added to the Nextjs webpage using “lottie-interactive” library.
Lottie interactive is custom web element adding multiple types of interactivity to Lottie animations.
Lottie-interactive is availabile through npm.
npm install lottie-interactive Then inside of your pages:
Animation files (.json) can be accessed if put inside the /public/ directory. URLs to the animation can also be used.
Interactions available in lottie- interactive are:
click
Plays animation when user clicks on animation container
freeze click
Freezes animation when user clicks on animation container
hover
Plays animation when user hovers on animation container
morph
Plays animation when user hovers on animation container, plays in reverse on ‘mouseexit’ event
morph-lock
Plays animation when user hovers on animation container. Locks animation at the end if user clicks. Plays in reverse on ‘mouseexit’ event.
switch
Plays animation when user clicks on animation container, plays again in reverse on second click
play-once
Plays animation once