https://github.com/toughyear/rotating-disk

animation inspired from suno.com/explore
https://github.com/toughyear/rotating-disk

Last synced: 2 days ago
JSON representation

animation inspired from suno.com/explore

• Host: GitHub
• URL: https://github.com/toughyear/rotating-disk
• Owner: toughyear
• Created: 2024-07-15T20:10:27.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-07-15T20:20:02.000Z (6 months ago)
• Last Synced: 2024-07-16T00:28:13.959Z (6 months ago)
• Language: TypeScript
• Homepage: https://rotating-disk.vercel.app/
• Size: 50.8 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Rotating Disc Animation

inspired from: https://suno.com/explore

Live at: https://rotating-disk.vercel.app

## Target:

![image](https://github.com/user-attachments/assets/b9ae52df-f822-4897-bbd2-5b85ca123d4d)

## Current status:

![image](https://github.com/user-attachments/assets/2a2a3553-02d1-4e70-aee0-2bdf6efcfe20)

## Process

![image](https://github.com/user-attachments/assets/81bfd2ec-b070-470c-8bc9-c4c6fa505ea5)

- [X] Looping lines effect:

  - copy the elements twice so that looping effect is seamless.

  - animate using `linear infinite` and 100% of size of the element to keep it going in the desired direction.

- [X] Create an imaginary circle with radius r and which as a portion of radius (d) inside the container (overflow hidden).

  - Arrange the lines along the arc of this circle depending on the Y position.

  - get the X using maths logic!

     

 

## TODO

- [ ] change angles of each lines as they scroll down.