CODEWITHSUNDEEP
javascriptcssnext.jsfrontendcss-animations
YannickAaron
YannickAaron

Reputation: 167

Right way to include dynamic animation with next.js

I would like to build a character creation app with next js. This tool should allow the user to alter the character with given slider as well as buttons for the gender.

I would like to have a 2d animated version of the character that is dynamically changed with the input. For example the age slider should change the age of the character and the height should change the height as the slider is moved.

However I have absolutely no idea what the right way is to approach something like this. Of cause I need to create all ne animations before hand, however I am not sure in which way I need to create them. Changing the picture with every movement seems not right. Also I would probably only need to alter parts of the character.

If you have any examples for something like this it would be highly appreciate if you could share them.

Upvotes: 0

Views: 1122

Answers (1)

user14758149
user14758149

Reputation:

You can use Farmer motion in your Next JS By installing it

   yarn add framer-motion
# or
npm install framer-motion

or take help from : https://www.freecodecamp.org/news/how-to-add-interactive-animations-and-page-transitions-to-a-next-js-web-app-with-framer-motion/

Upvotes: 1

Related Questions