https://github.com/rudeevelops/gitty---js-rive-character-menu

Gitty is an interactive character animation menu made in Rive and rendered entirely in-browser via Javascript runtime
https://github.com/rudeevelops/gitty---js-rive-character-menu

animation interaction rive ui

Last synced: about 1 month ago
JSON representation

Gitty is an interactive character animation menu made in Rive and rendered entirely in-browser via Javascript runtime

• Host: GitHub
• URL: https://github.com/rudeevelops/gitty---js-rive-character-menu
• Owner: RuDeeVelops
• Created: 2024-02-22T17:48:03.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-03-04T16:43:14.000Z (over 2 years ago)
• Last Synced: 2025-02-25T19:43:52.663Z (over 1 year ago)
• Topics: animation, interaction, rive, ui
• Language: CSS
• Homepage: https://rive.app/community/8333-15963-gitty-interactive-character-and-menu-animation/
• Size: 9.47 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

          
# Gitty - An Interactive Rive character animation menu

[![Follow on YouTube](https://img.shields.io/badge/-Follow%20on%20YouTube-red?logo=YouTube&logoColor=white&style=flat)](https://www.youtube.com/digitalclay)

[![Twitter Follow](https://img.shields.io/twitter/follow/3DRudy.svg?style=social)](https://twitter.com/3DRudy)

[![GitHub commits](https://img.shields.io/github/commit-activity/m/RuDeeVelops/creativedev-log.svg)](https://github.com/RuDeeVelops/creativedev-log/commits/main)

### Tech stack: `Rive` `JS` `css` `html`

### Live link: https://rive.app/community/8333-15963-gitty-interactive-character-and-menu-animation/

### Full Tutorial: https://www.youtube.com/watch?v=WSw02QGOOdI






    



### Main features

- A fully interactive character and menu Rive animation, triggered by mouse events.

- 100% web native via `JS/WASM` runtime for Rive.

- The source Rive file is found in: `src: "media/gitty.riv"`

- Live link: https://rive.app/community/8333-15963-gitty-interactive-character-and-menu-animation/

- The integration is done via a few lines of Javascript:



```html

  

  

  

    const canvas = document.getElementById("canvas");

    const r = new rive.Rive({

      src: "media/gitty.riv" /* Location of the .riv file */,

      canvas: document.getElementById("canvas"),

      autoplay: true,

      artboard: "mainComp" /* Specify your artboard name */,

      stateMachines: "State Machine 1" /* Specify your statemachines here */,

    });

  

```