npm i motion-provider

Playground for Motion Provider animations.

Ensure that your React node is ready to be animated or at least plan the outcome in mind by considering:

• Does it involve an image, text, container, group of elements?
• If it's a group of elements, how far apart are they?
• Are they HTML elements or React Nodes?

After finding the answers to the questions, you can move on to step two.

Regarding to the type of element you want animate/create-and-animate:

• if it is an image visit this link
• If it is a text visit this link
• If it is a simple container visit this link
• If it is a group of elements visit this link
• If it is a group of images visit this link

Adjust as you like. Play with the buttons, slides. Preview the animation looking before applying it. Stuck? Out of ideas? Roll the dice, increase the 'complexity' value in settings to combine more animations at once — considering the app FPS ofc.

And once you're done, copy the dynamically generated code snippet of your desired animation for your next app.

If you haven't installed the package yet, first install via npm i motion-provider. Then go back to your component. Paste the copied snippet, adjust by wiring up the staff, DONE ✅

If the current animation doesn't meet your expectations(very rare), you have the option to restart this cycle from step 3.