|Project Name||Stars||Downloads||Repos Using This||Packages Using This||Most Recent Commit||Total Releases||Latest Release||Open Issues||License||Language|
|Alpine||25,353||126||a day ago||119||November 19, 2023||14||mit||HTML|
|An easy way to perform animations when a React component enters or leaves the DOM|
|Morph DOM elements from one state to another with smooth animations and transitions|
|Animate DOM transitions.|
|Full page transitions with react-router.|
|Dom Helpers||391||61,061||899||2 months ago||34||April 26, 2021||27||mit||TypeScript|
|tiny, extremely modular, DOM helper library for IE9+|
|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.|
|A glitched effect for DOM elements|
|state animation plugin for react.js|
Live Demo: View
Download and include
touchpoint.min.js in the
<head> or at the end of the
<body> (recommended) in your HTML document. There are no dependencies:
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>
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>
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.
Change the default color of TouchPoint. Any valid CSS color can be used.
TouchPoint.color = 'red';
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.
TouchPoint.dom = elementVarId;
Change the opacity of the TouchPoint. You can use any value between
TouchPoint.opacity = 0.5;
Change the final scale of the TouchPoint. This value can range from
0 and beyond.
TouchPoint.scale = 14;
Change the initial size of the TouchPoint. This value is
TouchPoint.size = 5;
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.
– Updated to ES6 and reintroduced quick-clicking.
– Initial Release
This is in active development.