Touchpoint Js

A vanilla JavaScript library that visually shows taps/clicks for HTML prototypes using CSS3 transitions on desktop and mobile.
Alternatives To Touchpoint Js
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Alpine25,353126a day ago119November 19, 202314mitHTML
A rugged, minimal framework for composing JavaScript behavior in your markup.
React Transition Group9,77147,7156,4697 months ago43August 01, 2022218otherJavaScript
An easy way to perform animations when a React component enters or leaves the DOM
Ramjet5,4412377 years ago9February 05, 201611mitJavaScript
Morph DOM elements from one state to another with smooth animations and transitions
Jquery.magicmove654
8 years ago2JavaScript
Animate DOM transitions.
React Tiger Transition47712a year ago27February 14, 202040mitJavaScript
Full page transitions with react-router.
Dom Helpers39161,0618992 months ago34April 26, 202127mitTypeScript
tiny, extremely modular, DOM helper library for IE9+
Touchpoint Js296
2 years ago3mitJavaScript
A vanilla JavaScript library that visually shows taps/clicks for HTML prototypes using CSS3 transitions on desktop and mobile.
Jquery Ui Carousel196
7 years ago12JavaScript
jQuery RS Carousel is a responsive and touch-enabled carousel written on top of jQuery and the jQuery UI Widget Factory providing a full and familiar API in less than 2.6kB minified and gzipped.
Glitch.js185
7 years agoFebruary 22, 20214JavaScript
A glitched effect for DOM elements
React.animate167362 years ago1July 25, 20151mitJavaScript
state animation plugin for react.js
Alternatives To Touchpoint Js
Select To Compare


Alternative Project Comparisons
Readme

TouchPoint.js

A tiny (3.86 kb minified) vanilla JavaScript library made for in-browser HTML prototyping (as part of the UX process) that visually shows where the user clicks/taps on-screen using CSS3 transforms and transitions. TouchPoint is highly customizable, mobile ready and great for screencasting, screen recording, user testing and presentations. Library now built for ES6 and ES5.

TouchPoint.js in action

Live Demo: View

Installation

ES5

Download and include touchpoint.js or touchpoint.min.js in the <head> or at the end of the <body> (recommended) in your HTML document. There are no dependencies:

<script src="touchpoint-es5.min.js"></script>

ES6

Same instructions as above, but you will need a polyfill to run in-browser. I use babel-polyfill which can be installed on your machine by using NPM from your command line.

<script src="node_modules/babel-polyfill/dist/polyfill.min.js"></script>
<script src="touchpoint.min.js"></script>

Quick Start/How to Use

After you load the script you simply initialize TouchPoint and add an event listener to whichever DOM element you want TouchPoint to show over:

<script>
	TouchPoint.init();
</script>

That's it!

Start clicking away on the page to see it in action.

Options

TouchPoint is customizable. There are a number of options that you have access to to customize the look for your needs. It's important that these options be defined before you initialize TouchPoint with TouchPoint.init(). Otherwise, your updates won't show.

Color

Change the default color of TouchPoint. Any valid CSS color can be used.

Default value: '#FFF'

TouchPoint.color = 'red';

DOM

Change the default DOM element that TouchPoint will be active over. Any valid selector can be used: element name, CSS class or ID. If you want TouchPoint to only show on a specific element, make sure that that element is set to overflow: visible, otherwise TouchPoint will get clipped.

Default value: window

TouchPoint.dom = elementVarId;

or (recommended)

TouchPoint.init(elementVarId);

Opacity

Change the opacity of the TouchPoint. You can use any value between 0 and 1.

Default value: 0.8

TouchPoint.opacity = 0.5;

Scale

Change the final scale of the TouchPoint. This value can range from 0 and beyond.

Default value: 8

TouchPoint.scale = 14;

Size

Change the initial size of the TouchPoint. This value is px.

Default value: 20

TouchPoint.size = 5;

Performance

Performance should not be an issue because each individual TouchPoint element is dynamically created and then automatically removed from the DOM after being used.

The animation is handled via the requestAnimationFrame function that is available in all current browsers. This has better overall performance than using setTimeout, which doesn't redraw consistently.

Release Notes

TouchPoint.js 1.0.1
– Updated to ES6 and reintroduced quick-clicking.

TouchPoint.js 1.0
– Initial Release

This is in active development.

Roadmap

  • [X] Reintroduce quick clicking.
  • [ ] Add keyboard shortcut to enable/disable script.

Feedback

If you discover any issues please first check open/past issues or open a new issue if one does not already exist.

If you have any questions regarding usage, please send a message me here on GitHub, @jonahvsweb on Twitter or from my website, jonahvsweb.com.

Popular Transition Projects
Popular Dom Projects
Popular User Interface Categories

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Javascript
Css
Dom
Transition
Tap