Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/q1akm/learning-motion

An open-source project designed for experimenting with animations, motion effects, and modern web technologies.
https://github.com/q1akm/learning-motion

animation community contribution framer-motion github gsap hacktoberfest hacktoberfest2024 javascript motion open-source-project react

Last synced: 3 days ago
JSON representation

An open-source project designed for experimenting with animations, motion effects, and modern web technologies.

Awesome Lists containing this project

README

        

# Learning Motion
A project focused on learning and experimenting with motion in web development, featuring various animations, transitions, and GSAP (GreenSock Animation Platform) implementations.

# Available Scenes

Loading Page: A demo showcasing animated loading screens.


Basic: Simple motion demonstrations using fundamental animation techniques.


Dot: An example of motion involving dots, useful for visualizing small interactive elements.


Cursor: Custom animated cursors that respond to user interactions.


Page Animated Transition: Smooth page transitions using animations.


Drag - GSAP: A draggable element demo using GSAP's drag feature.


GSAP 001: An example of more advanced GSAP animations.


Test: A sandbox environment to test new animation ideas.

![Learning Motion - Google Chrome 9_27_2024 3_57_54 PM](https://github.com/user-attachments/assets/5c7fcc4c-5a63-41a6-819f-4b5974948037)

## Contributing 🀝

We welcome contributions to the Learning Motion project! Whether you want to create new animations, enhance existing components, or improve documentation, your help is appreciated. Here’s how you can contribute:

### How to Contribute

1. **Create an Issue**: If you have an idea for a new animation or feature, please create an issue in the [issue tracker](https://github.com/q1akm/Learning-motion/issues) to discuss it first.

2. **Fork the Repository**: Click on the "Fork" button at the top right corner of the repository page to create a copy of the repository under your GitHub account.

3. **Clone Your Fork**: Clone your forked repository to your local machine:

```bash
git clone https://github.com/q1akm/Learning-motion.git
```

4. **Create a Branch**: Create a new branch for your feature or fix:

```bash
git checkout -b new-animation-[your-feature]
```

5. **Make Changes**: Implement your changes, and ensure your code follows the project's style guide. Add relevant documentation where necessary.

6. **Commit Your Changes**: Commit your changes with a clear and concise message:

```bash
git commit -m "Add new animation: [brief description]"
```

7. **Push Your Changes**: Push your branch to your fork:

```bash
git push origin new-animation-[your-feature]
```

8. **Create a Pull Request**: Go to the original repository and create a pull request from your branch. Provide a detailed description of your changes, and reference any relevant issues.

## Give it a Star! ⭐
If you found this project helpful or inspiring, make sure to give it a star on GitHub! Your support means a lot and helps the project grow.