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.

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