{"id":17802880,"url":"https://github.com/geometricpanda/angular-tilt","last_synced_at":"2025-03-17T11:31:11.695Z","repository":{"id":41568298,"uuid":"509827467","full_name":"geometricpanda/angular-tilt","owner":"geometricpanda","description":"Angular tilt is a native angular port of tilt.js allowing high quality interactive 3D tilt transforms at 60fps+","archived":false,"fork":false,"pushed_at":"2024-05-02T16:31:15.000Z","size":3328,"stargazers_count":6,"open_issues_count":7,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-10T21:39:08.549Z","etag":null,"topics":["angular","angular14","tilt","tiltjs","transform"],"latest_commit_sha":null,"homepage":"https://angular-tilt.geometricpanda.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/geometricpanda.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-07-02T18:03:09.000Z","updated_at":"2025-01-15T06:12:10.000Z","dependencies_parsed_at":"2024-05-02T17:40:36.688Z","dependency_job_id":"2c2384db-94f2-4f57-9ded-2221c107977d","html_url":"https://github.com/geometricpanda/angular-tilt","commit_stats":{"total_commits":36,"total_committers":2,"mean_commits":18.0,"dds":0.02777777777777779,"last_synced_commit":"1948bf04db78e4e0355f1b87602a1fac9e467c2d"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geometricpanda%2Fangular-tilt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geometricpanda%2Fangular-tilt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geometricpanda%2Fangular-tilt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geometricpanda%2Fangular-tilt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/geometricpanda","download_url":"https://codeload.github.com/geometricpanda/angular-tilt/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243858721,"owners_count":20359407,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular14","tilt","tiltjs","transform"],"created_at":"2024-10-27T12:44:48.446Z","updated_at":"2025-03-17T11:31:11.053Z","avatar_url":"https://github.com/geometricpanda.png","language":"TypeScript","readme":"[![Netlify Status](https://api.netlify.com/api/v1/badges/69d9522b-e3e8-43ea-b899-0be2084a752e/deploy-status)](https://app.netlify.com/sites/angular-tilt/deploys)\n[![npm version](https://badge.fury.io/js/@geometricpanda%2Fangular-tilt.svg)](https://www.npmjs.com/package/@geometricpanda/angular-tilt)\n\n# Angular Tilt\n\nAn Angular port of [Tilt.js](https://gijsroge.github.io/tilt.js/).\n\nAngular tilt is an easy way to apply parallax and depth micro-transitions to HTML elements.\n\nNote: This does not require any jQuery.\n\n## Installation\n\nAngular Tilt is available from [npmjs.com](https://npmjs.com/package/@geometricpanda/angular-tilt)\n\n### NPM\n\n`npm install @geometricpanda/angular-tilt --save`\n\n### Yarn\n\n`yarn add @geometricpanda/angular-tilt`\n\n## Getting Started\n\nYou'll need to add the `NgTiltModule` to the relevant parts of your application:\n\n```typescript\n// Your NgModule\n\nimport {NgTiltModule} from '@geometricpanda/angular-tilt';\n\n@NgModule({\n  declarations: [...],\n  imports: [NgTiltModule],\n  exports: [...],\n})\n\n```\n\n## Usage\n\n```html\n// Your Template\n\n\u003cdiv class=\"gradient\" ngTilt\u003e\n\n  \u003cdiv class=\"square\" ngTiltParallax\u003e\u003c/div\u003e\n\n\u003c/div\u003e\n```\n\n## Directives\n\n### `[ngTilt]`\n\nThis is the main `ngTilt` directive which you apply to your order HTML element.\n\n#### Inputs\n\n| Name          | Type      | Default                         | Description                                                                     |\n|---------------|-----------|---------------------------------|---------------------------------------------------------------------------------|\n| `maxTilt`     | `number`  | `20`                            | The maximum number of degrees to tilt                                           |\n| `perspective` | `number`  | `300`                           | Sets the perspective of the plane, lower numbers will appear to transition more |\n| `glare`       | `boolean` | `false`                         | Applies a glare to the tilted element                                           |\n| `maxGlare`    | `number`  | `0.4`                           | Maximum amount of glare                                                         |\n| `easing`      | `string`  | `cubic-bezier(.03,.98,.52,.99)` | CSS Easing effect on mouse enter / exit                                         |\n| `scale`       | `number`  | `1`                             | CSS Scale transformation applied on mouseover, 1 = 100%, 2 = 200% ...           |\n| `speed`       | `number`  | `400`                           | Time taken in `ms` for reset transition                                         |\n| `disableAxix` | `x` / `y` | `undefined`                     | Prevent the tilt from applying to a specific axis                               |\n| `reset`       | `boolean` | `true`                          | Whether the tilt should reset to 0 degrees when the mouse leaves the area       | \n\n### `[ngTiltParallax]`\n\nThis is a sub directive, which can be applied to children of the `ngTilt` directive.\nIt will allow the child element to parallax (appear as if it's on a different plane) against the `ngTilt` element.\n\n#### Inputs\n\n| Name          | Type      | Default | Description                                      |\n|---------------|-----------|---------|--------------------------------------------------|\n| `distance`    | `number`  | `50`    | Configures distance in front of the parent plane | \n\n## Recognitions\n\n- Thanks go to Gijs Roge, the original author of [Tilt.js](https://gijsroge.github.io/tilt.js/)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeometricpanda%2Fangular-tilt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgeometricpanda%2Fangular-tilt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeometricpanda%2Fangular-tilt/lists"}