Flow-motion NPM

Features ✨

Intuitive API: Simple, easy-to-use syntax for creating animations.
High Performance: Optimized for smooth and efficient animations across all devices.
Flexible: Supports a wide range of animation types and customization options.
Compatible: Works seamlessly with popular frameworks like React, Vue, and more.

Installation 🚀

To install Flow Motion, use npm:

npm install flow-motion

Getting Started

Here's a basic example to get you started with Flow Motion:

import { animate } from 'flow-motion';

animate({
  element: '#myElement',
  properties: [
    { property: 'opacity', from: 0, to: 1 },
    { property: 'transform', from: 'translateY(50px)', to: 'translateY(0px)' }
  ],
  duration: 1000,
  easing: 'easeInOut'
});

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flow Motion Example</title>
  <style>
    #myElement {
      opacity: 0;
      transform: translateY(50px);
      transition: opacity 1s ease-in-out, transform 1s ease-in-out;
    }
  </style>
</head>
<body>
  <div id="myElement">Hello, Flow Motion!</div>

  <script src="node_modules/flow-motion/dist/flow-motion.min.js"></script>
  <script>
    FlowMotion.animate({
      element: '#myElement',
      properties: [
        { property: 'opacity', from: 0, to: 1 },
        { property: 'transform', from: 'translateY(50px)', to: 'translateY(0px)' }
      ],
      duration: 1000,
      easing: 'easeInOut'
    });
  </script>
</body>
</html>

Documentation

For detailed usage, advanced examples, and API reference, visit our documentation.

Contributing

We welcome contributions! If you'd like to contribute to Flow Motion, please follow these steps:

Note*: Read our code of conduct
Fork the repository.
Create a new branch (git checkout -b feature-branch).
Make your changes.
Commit your changes (git commit -am 'Add new feature').
Push to the branch (git push origin feature-branch).
Create a new Pull Request.
Please read our contributing guide for more details.

License

Flow Motion is licensed under the MIT License. See the LICENSE file for more information.

Stay Connected

next nextra nextra-theme-docs react react-dom uglify-js

0.0.0

9 months ago