Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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.
- Host: GitHub
- URL: https://github.com/q1akm/learning-motion
- Owner: q1akm
- License: mit
- Created: 2024-04-12T13:39:33.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-12-08T04:34:14.000Z (about 2 months ago)
- Last Synced: 2024-12-08T05:21:17.968Z (about 2 months ago)
- Topics: animation, community, contribution, framer-motion, github, gsap, hacktoberfest, hacktoberfest2024, javascript, motion, open-source-project, react
- Language: JavaScript
- Homepage: https://learning-motion.vercel.app
- Size: 2.49 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
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.