NgxTouchTrail

Features

• Create a trail that follows finger on touch move (or mouse on mousemove)
• You can set your own animation to trail elements
• the trail process works on runOutsideAngular, avoiding change detection calls.
• On finish launch a event touchTrailEnded with information about initial and final position

This library was generated with Angular CLI version 10.0.9.

Demo

Demo here.

Installation

npm i ngx-touch-trail --save

@angular/animations package is a required dependency for the default toast

npm install @angular/animations --save

Setup

Module:

import { NgxTouchTrailModule } from 'ngx-touch-trail'
....
imports: [
  .....
  NgxTouchTrailModule
],

Component

It works as a directive so

<div touchTrail (touchTrailEnded)="consoleLog($event)">
  <span>touch and move</span>
</div>

or customize it:

<div
  touchTrail="{color:'#f00',eventType:'mouse'}"
  [disableTrail]="isTrailActive"
  (touchTrailEnded)="consoleLog($event)">
  <span>touch and move</span>
</div>

Parameters

Name	Description	Default
(touchTrailEnded)	Called when trail finish (usually on touchend)
className	Set dot class	'touch-trail-dot'
eventType	Set trigger event (touch/mouse)	'touch'
destroyDelay	ms before dot get destroyed	400
interpolationStep	Pixels between interpolated dots	100
maxInterpolatedDots	Max number of interpolated dots	90
color	Trail color	'#3da4ab'
clearOnInit	At begining of new trail destroy previous one (usually on touchstrat)	true
freezeOnEnd	Freeze dots on trail finish (usually on touchend)	false
animationMeta	Animation method	(index: number, options: any) => AnimationMetadata[]

animationMeta

This method controls dots animation it get

Name	Description
index	Index in dots array
options	Full options object