geometricpanda/angular-tilt

Angular tilt is a native angular port of tilt.js allowing high quality interactive 3D tilt transforms at 60fps+

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

angular-tilt's Issues

i can't install with angular 16 i get this error

Run this command: npm install @geometricpanda/angular-tilt --save
i get this error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/rxjs
npm ERR!   rxjs@"~7.5.0" from the root project
npm ERR!   peer rxjs@"^6.5.3 || ^7.4.0" from @angular/[email protected]
npm ERR!   node_modules/@angular/common
npm ERR!     @angular/common@"^14.2.0" from the root project
npm ERR!     peer @angular/common@"^14.0.0" from @geometricpanda/[email protected]
npm ERR!     node_modules/@geometricpanda/angular-tilt
npm ERR!       @geometricpanda/angular-tilt@"*" from the root project
npm ERR!   1 more (@angular/core)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer rxjs@"~7.4.0" from @geometricpanda/[email protected]
npm ERR! node_modules/@geometricpanda/angular-tilt
npm ERR!   @geometricpanda/angular-tilt@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.