website·Indexed 31 days ago
https://vevetjs.comA flexible client-side JavaScript library for creating interactive user interfaces. It provides a comprehensive suite of modules including Canvas, Cursor, InView, Marquee, Pointers, Preloader, Raf, Scrollbar, and ScrollProgress, featuring advanced API methods like addElement, updateProps, and various callback systems for motion smoothing and resource management.
Timeline class is used for managing animations with easing and precise progress control. It provides a programmatic interface to play, reverse, pause, and reset animation sequences.Swipe class manages swipe interactions by tracking pointer movement and detecting direction. It emits events on start, move, and end. Key features include RAF-based release inertia with optional bounds bounce, rubber-band overflow, snap targets, and programmatic scaling with zoom-to-point. Note that Swipe does not apply CSS transforms automatically; it only provides the computed coordinates which the developer must apply in callbacks.Scrollbar instance provides several accessors to retrieve information about the scrollbar's state, dimensions, and associated DOM elements. All general Module accessors are also available in this class.const instance = new Scrollbar();
// Direction and Elements
console.log(instance.axis); // "x" or "y"
console.log(instance.container); // Window | HTMLElement (the element the scrollbar is applied to)
console.log(instance.outer); // HTMLElement (scrollbar wrapper)
console.log(instance.parent); // HTMLElement (element where scrollbar is appended)
console.log(instance.scrollElement); // HTMLElement (the actual scrollable element)
console.log(instance.thumb); // HTMLElement (draggable handle)
console.log(instance.track); // HTMLElement (container of the thumb)
// Sizes and Values
console.log(instance.scrollableSize); // number (total scrollable distance)
console.log(instance.scrollSize); // number (total scroll width/height of content)
console.log(instance.scrollValue); // number (scrollTop or scrollLeft)
console.log(instance.thumbSize); // number (size of the thumb element)
console.log(instance.trackSize); // number (size of the track container)hoveredElement accessor provides information about the currently hovered element, but only if that element was registered via .attachHover(). It returns undefined when no interactive element is hovered. Available properties include element, type, snap, width, height, padding, sticky, stickyX, and stickyY.const cursor = new Cursor();
if (cursor.hoveredElement) {
console.log('Hovered element:', cursor.hoveredElement.element);
console.log('Cursor type:', cursor.hoveredElement.type);
}SplitText is a utility that splits text within a container into individual lines, words, and letters. It supports automatic resplitting on window resize, preserves dynamic content (restoring original DOM nodes on destroy), and handles HTML, emojis, multibyte symbols, <br> tags, and .vevet instance from the 'vevet' package to access core functionality, including versioning and system detection.import { vevet } from 'vevet';
console.log(vevet.version); // => '5.0.0'
console.log(vevet.osName); // => 'windows'
console.log(vevet.browserName); // => 'chrome'Follow these best practices to ensure optimal performance when using InView:
hasOut: false if you only need the trigger to fire once, which reduces callback overhead and improves performance.data-in-view-class attribute for CSS-driven animations instead of JavaScript-based transitions for better performance.direction parameter provided in callbacks to implement animations that respond to the scroll direction.Cursor class allows for the creation of a custom visual cursor. It supports both static properties (set at initialization) and mutable properties (updatable via .updateProps()).const cursor = new Cursor({
container: document.getElementById('cursor-container'),
hideNative: true,
behavior: 'default',
width: 50,
height: 50,
lerp: 0.2
});loading="lazy" are automatically ignored. The module does not provide default styling for the container; you must define the CSS for your preloader element.import { ProgressPreloader, clamp } from 'vevet';
const progressElement = document.getElementById('progress');
const preloader = new ProgressPreloader(
{
container: document.getElementById('preloader'),
hide: 700, // Hide container after 700ms once page is loaded
},
{
onProgress: () => {
const { progress } = preloader;
// Calculate percentage and update UI
const percent = clamp(progress * 100, 0, 99);
progressElement.innerHTML = `${percent.toFixed(0)}%`;
},
}
);attachCursor and then trigger that type during a hover event using attachHover.// 1. Define the visual cursor element
cursor.attachCursor({
element: document.getElementById('cursor-type-element'),
type: 'some_type',
});
// 2. Apply this type when hovering over a specific element
cursor.attachHover({
element: document.getElementById('trigger-element'),
type: 'some_type',
});