typicaljs alternatives and similar libraries
Based on the "Animations" category.
Alternatively, view typical alternatives based on common mentions on social networks and blogs.
-
AutoAnimate
A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application. -
tsParticles
tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components. -
Scrawl-canvas Library
Responsive, interactive and more accessible HTML5 canvas elements. Scrawl-canvas is a JavaScript library designed to make using the HTML5 canvas element easier, and more fun -
Scroll Btween
ScrollBtween uses scroll position of document - or any DOM element - to tween CSS values on any DOM element. -
TransitionEnd
:dizzy: TransitionEnd is an agnostic and cross-browser library to work with transitionend event. -
Scroll Frames
Animate sequences of still frames on any DOM element in relation with its position into the viewport. https://olivier3lanc.github.io/Scroll-Frames/
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of typicaljs or a related project?
README
typical
Animated typing in ~400 bytes :blowfish: of JavaScript.
- Zero dependencies
- MIT licensed →
- Emoji support
- Smart delete: only delete what needs deleting
- Pausing: pause between steps
- Looping: easily loop from any point
- Waiting: wait on arbitrary Promises
- Humanity: slightly varied typing speed
Install
npm install @camwiegert/typical
More install options Instead of using a package manager, you can download typical.js from GitHub and import it locally or import it directly from a CDN like unpkg.
API
type(target: HTMLElement, ...steps: any[]) => Promise<void>;
The module exports a single function, type
, which takes a target element as its first argument, and any number of additional arguments as the steps to perform. Additional arguments perform actions based on their type:
Type | Action |
---|---|
string |
Type text |
number |
Pause (milliseconds) |
function |
Call with target element |
Promise |
Wait for resolution |
Usage
The most basic usage of type
is providing a target element and a string to type.
import { type } from '@camwiegert/typical';
type(element, 'text');
Pausing
In order to pause typing at any point, pass a number of milliseconds to pause.
type(element, 'Hello', 1000, 'Hello world!');
Looping
In order to loop, pass type
as a parameter to itself at the point at which you'd like to start looping. It can be helpful to alias type
as loop
to be explicit.
import {
type,
type as loop
};
const steps = [1000, 'Ready', 1000, 'Set', 1000, 'Go'];
type(element, ...steps, loop);
To loop a finite amount, pass your steps multiple times.
type(element, ...steps, ...steps, ...steps);
Waiting
When passed a Promise
, type
will wait for it to resolve before continuing. Because type
itself returns a Promise
, that means you can wait on a set of steps to complete before starting another.
const init = type(target, 'In a moment...', 500);
type(target, init, 'start', 500, 'looping', loop);
Functions
Function arguments are passed the target element, and can be useful for operating on the target element between steps. If you return a Promise
, type
will wait for it to resolve.
const toggle = (element) =>
element.classList.toggle('is-typing');
type(target, toggle, 'Type me', toggle);
Support
- [x] Chrome
- [x] Edge
- [x] Firefox
- [x] Safari
- [ ] Internet Explorer
Related
- react-typical - React component
- vue-typical - Vue component
*Note that all licence references and agreements mentioned in the typicaljs README section above
are relevant to that project's source code only.