Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/prakhar-002/3d-animation-site

Craft ✏️ intricate 3D animations effortlessly 💫 with our Canvas-based web app 🖥️ , focusing on a single element 💎. Streamlined interface, and real-time rendering ⌚ empower users to unleash their creativity 🪄 with simplicity 🕊️ and depth ☄️.
https://github.com/prakhar-002/3d-animation-site

3d canvas frame front-end-development html-css-javascript website

Last synced: 29 days ago
JSON representation

Host: GitHub
URL: https://github.com/prakhar-002/3d-animation-site
Owner: Prakhar-002
Created: 2024-06-03T17:53:29.000Z (8 months ago)
Default Branch: main
Last Pushed: 2024-06-21T14:38:56.000Z (7 months ago)
Last Synced: 2024-06-22T07:10:27.762Z (7 months ago)
Topics: 3d, canvas, frame, front-end-development, html-css-javascript, website
Language: JavaScript
Homepage: https://3d-animation-site.netlify.app/
Size: 68.3 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# **CYBER FICTION** - A 3D-Animation-site 🍥

**Welcome to our 3D Animation Web App!** powered by `Canvas, Locomotive css, Locomotive JS, G-SAP, and Scroll-Trigger`. This application enables you to create **dynamic and immersive 3D animations directly in your web browser**.

> Apologies for the slow site loading due to canvas frame rendering.

➥ Live Demo

# Screenshots ⛩️

![cyber fiction 3d](https://github.com/Prakhar-002/3D-Animation-Site/assets/136890202/422bc966-06cb-43ce-9e5c-146da6536309)

# Tech Stack 👨🏻‍💻

![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)

# Features 💎
- `Canvas-based Rendering` ➤ **Utilizes** `HTML5/JAVASCRIPT` **Canvas for real-time 3D rendering**.

- `Locomotive CSS` ➤ **Smooth scroll animations** for a `visually appealing experience`.

- `Locomotive JS` ➤ **Lightweight scroll animation** `library for fluid animations`.

- `G-SAP` ➤ **GreenSock Animation Platform** for `powerful, smooth animations`.

- `Scroll-Trigger` ➤ **GSAP plugin** for `triggering animations based on scroll positions`.

# Deployment 🛫

**To 🏃🏻‍♂️ locally this CYBER FICTION - A 3D-Animation-site** *run this command on your git bash*

`For window 🍃`
```bash
git clone https://github.com/Prakhar-002/3D-Animation-Site.git
```

`For Linux and macOS 🌿`
```bash
sudo git clone https://github.com/Prakhar-002/3D-Animation-Site.git
```