vinicius91 / angular-tilt

An Angular Directive for tilt effect

AngularTilt

A 3D tilt implementation for Angular based on the vanilla-tilt.js and Tilt.js.

Usage

Just import the module in the module that you would like to include the directive in your components

@NgModule({
  imports: [BrowserModule, BrowserAnimationsModule, AngularTiltModule],
  declarations: [AppComponent, ProjectCardComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

And add the directive to you components

<div class="container" aTilt></div>

<div class="container" aTilt [tiltSettings]="tiltSettings"></div>

Install

yarn add angular-tilt

or

npm install --save angular-tilt

Credits

Original libraries__:

• vanilla-tilt.js;
• Tilt.js

License

MIT License

angular-tilt's Issues

How to configure the settings of aTilt

Please demonstrate how to modify the settings of aTilt
I tried using [tiltSettings]="tiltSettings" but I wasn't able to get it right.

Thanks in advance.

Issue on IOS mobile device

When click on any element with tilt attribute raises issue when touched to multiple stack images,

I am getting blur text on tilt

I am getting blur text on tilt,
else I am not seeing that in vanillaTilt.. is it due to version mismatch?

Angular 11 Support

NPM dependency error when using "@angular/common": "~11.1.0", see below:

Note, this may in part be due to the NPM version, I believe the latest versions are stricter.

Node: 15.6.0
NPM: 7.4.0

npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^7.2.0" from [email protected]
npm ERR! node_modules/angular-tilt
npm ERR!   angular-tilt@"*" from the root project