@geometricpanda/angular-tilt NPM

Angular Tilt

An Angular port of 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

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:

// Your NgModule

import {NgTiltModule} from '@geometricpanda/angular-tilt';

@NgModule({
  declarations: [...],
  imports: [NgTiltModule],
  exports: [...],
})

Usage

// Your Template

<div class="gradient" ngTilt>

  <div class="square" ngTiltParallax></div>

</div>

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.