https://github.com/pranjal-jamuar/ringston
Discover the fusion of art and technology in every scroll with Ringston.
https://github.com/pranjal-jamuar/ringston
gsap gsap-animation gsap-scrolltrigger threejs threejs-learning
Last synced: 12 days ago
JSON representation
Discover the fusion of art and technology in every scroll with Ringston.
- Host: GitHub
- URL: https://github.com/pranjal-jamuar/ringston
- Owner: Pranjal-Jamuar
- Created: 2024-03-17T12:41:18.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-25T06:22:10.000Z (over 2 years ago)
- Last Synced: 2025-02-26T13:12:41.629Z (over 1 year ago)
- Topics: gsap, gsap-animation, gsap-scrolltrigger, threejs, threejs-learning
- Language: JavaScript
- Homepage: https://pranjaljamuar-ringston-gsap.netlify.app/
- Size: 26.8 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Ringston: The Animated Interface Experience
## Caption:
Discover the fusion of art and technology in every scroll with Ringston.
## Description:
Ringston is an exquisitely crafted landing page that offers a unique blend of vertical and horizontal scrolling powered by the Green Sock Animation Platform (GSAP). It’s designed to showcase stunning 2D animations, integrated with a sophisticated 3D model that elevates the visual storytelling. The seamless, fluid scrolling experience is made possible with Lenis, creating a smooth journey through the content that feels intuitive and engaging.
## Technologies Used:
- GSAP (Green Sock Animation Platform): For creating vivid, high-performance animations.
- Three.js: Employed for rendering 3D graphics within the web browser.
- Lenis: Ensures an ultra-smooth scrolling experience across different devices and browsers.
- Split-type: Allows for intricate character and text animations that respond to user interactions.
## Features:
- Amalgamation of horizontal and vertical scrolling: Offers a dynamic way to navigate through content.
- Full utilization of GSAP: Pushes the boundaries of web animations to deliver a captivating user experience.
- Engaging 3D model integration: Adds depth and realism to the 2D canvas of the web.
## Use Cases:
- Ideal for presenting portfolios, product showcases, and interactive storytelling.
- Perfect for websites that aim to stand out with extraordinary animation and interactive elements.
## Live Demo Link:
[Ringston Live](https://pranjaljamuar-ringston-gsap.netlify.app/) - Bookmark this page for quick access in the future.
## How to Install Locally:
1. Clone the repository to your local machine.
2. Run `npm install` to install all dependencies.
3. Launch the development server with `npm run dev`