Framely

A cutting-edge library of animated components built with Framer Motion. This library empowers developers to easily integrate stunning animations into their web projects while maintaining performance and simplicity.

🚀 Features

• Rich Animation Components: Ready-to-use animated components like FadeIn, SlideIn, Zoom, and more.
• Composable API: Highly flexible components to support any animation scenario.
• CSS Modules: Scoped and maintainable styles for each component.
• Tree-shakable: Import only what you need to optimize bundle size.
• TypeScript Support: Fully typed components for an enhanced developer experience.
• Custom Configuration: Extend and tweak animations to fit your project.

📦 Installation

Install the library via npm or yarn:

npm install framely
# or
yarn add framely

🛠 Usage

Import and use the animated components in your project:

Example: FadeIn Animation

import React from "react";
import { FadeIn } from "framely";

const App = () => (
  <FadeIn duration={0.5} delay={0.2}>
    <h1>Hello, World!</h1>
  </FadeIn>
);

export default App;

Advanced Example: Chained Animations

import React from "react";
import { FadeIn, SlideIn } from "framely";
// or
import ProgressBar from "framely/progress-bar";

const App = () => (
  <div>
    <FadeIn duration={0.5}>
      <h1>Welcome!</h1>
    </FadeIn>
    <SlideIn direction="left" duration={0.7}>
      <p>This is an awesome animation library!</p>
    </SlideIn>
  </div>
);

export default App;

⚙️ Configuration

You can define a configuration file to customize default animation settings:

framely.config.ts

export default {
  defaultDuration: 0.8,
  defaultEasing: "easeInOut",
};

Place this file in the root of your project. The library will automatically pick it up during installation.

🌟 Components

| Component | Description | | --------- | ------------------------------------------- | | FadeIn | Animates elements with a fade-in effect. | | SlideIn | Slides elements from a specified direction. | | Zoom | Animates elements with a zoom-in effect. | | Stagger | Stagger animations for a list of elements. | | Bounce | Adds a bouncing animation. |

🔧 API Reference

Common Props

| Prop | Type | Default | Description | | ----------- | -------- | ----------- | ------------------------------------- | ------- | ------ | ------------------------------------- | | duration | number | 0.5 | Duration of the animation in seconds. | | delay | number | 0 | Delay before the animation starts. | | easing | string | easeInOut | Easing function for the animation. | | direction | 'left' | 'right' | 'up' | 'down' | down | Direction for slide-based animations. |

🧪 Development

Clone and Install Dependencies

git clone https://github.com/ArianZargaran/Framely.git
cd framely
npm install

Run Storybook

npm run storybook

Build the Library

npm run build

🛡 Testing

The library includes unit tests for every component. To run the tests:

npm run test

📄 License

This project is licensed under the MIT License. See the LICENSE file for details.

💬 Feedback and Contributions

We’d love to hear your feedback and suggestions! Feel free to open an issue or contribute by submitting a pull request.