https://github.com/geometricpanda/angular-tilt
Angular tilt is a native angular port of tilt.js allowing high quality interactive 3D tilt transforms at 60fps+
https://github.com/geometricpanda/angular-tilt
angular angular14 tilt tiltjs transform
Last synced: about 1 month ago
JSON representation
Angular tilt is a native angular port of tilt.js allowing high quality interactive 3D tilt transforms at 60fps+
- Host: GitHub
- URL: https://github.com/geometricpanda/angular-tilt
- Owner: geometricpanda
- License: mit
- Created: 2022-07-02T18:03:09.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-05-02T16:31:15.000Z (12 months ago)
- Last Synced: 2025-03-10T21:39:08.549Z (about 2 months ago)
- Topics: angular, angular14, tilt, tiltjs, transform
- Language: TypeScript
- Homepage: https://angular-tilt.geometricpanda.dev
- Size: 3.17 MB
- Stars: 6
- Watchers: 1
- Forks: 1
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
[](https://app.netlify.com/sites/angular-tilt/deploys)
[](https://www.npmjs.com/package/@geometricpanda/angular-tilt)
# Angular Tilt
An Angular port of [Tilt.js](https://gijsroge.github.io/tilt.js/).
Angular tilt is an easy way to apply parallax and depth micro-transitions to HTML elements.
Note: This does not require any jQuery.
## Installation
Angular Tilt is available from [npmjs.com](https://npmjs.com/package/@geometricpanda/angular-tilt)
### NPM
`npm install @geometricpanda/angular-tilt --save`
### Yarn
`yarn add @geometricpanda/angular-tilt`
## Getting Started
You'll need to add the `NgTiltModule` to the relevant parts of your application:
```typescript
// Your NgModule
import {NgTiltModule} from '@geometricpanda/angular-tilt';
@NgModule({
declarations: [...],
imports: [NgTiltModule],
exports: [...],
})
```
## Usage
```html
// Your Template
```
## Directives
### `[ngTilt]`
This is the main `ngTilt` directive which you apply to your order HTML element.
#### Inputs
| Name | Type | Default | Description |
|---------------|-----------|---------------------------------|---------------------------------------------------------------------------------|
| `maxTilt` | `number` | `20` | The maximum number of degrees to tilt |
| `perspective` | `number` | `300` | Sets the perspective of the plane, lower numbers will appear to transition more |
| `glare` | `boolean` | `false` | Applies a glare to the tilted element |
| `maxGlare` | `number` | `0.4` | Maximum amount of glare |
| `easing` | `string` | `cubic-bezier(.03,.98,.52,.99)` | CSS Easing effect on mouse enter / exit |
| `scale` | `number` | `1` | CSS Scale transformation applied on mouseover, 1 = 100%, 2 = 200% ... |
| `speed` | `number` | `400` | Time taken in `ms` for reset transition |
| `disableAxix` | `x` / `y` | `undefined` | Prevent the tilt from applying to a specific axis |
| `reset` | `boolean` | `true` | Whether the tilt should reset to 0 degrees when the mouse leaves the area |
### `[ngTiltParallax]`
This is a sub directive, which can be applied to children of the `ngTilt` directive.
It will allow the child element to parallax (appear as if it's on a different plane) against the `ngTilt` element.
#### Inputs
| Name | Type | Default | Description |
|---------------|-----------|---------|--------------------------------------------------|
| `distance` | `number` | `50` | Configures distance in front of the parent plane |
## Recognitions
- Thanks go to Gijs Roge, the original author of [Tilt.js](https://gijsroge.github.io/tilt.js/)