npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

velvetjs

v0.2.0

Published

A JavaScript Library for DOM Animations as smooth as Velvet

Downloads

6

Readme

Velvet

A JavaScript library for DOM animations as smooth as Velvet, which was inspired by Velocity and jQuery Transit.

TL;DR

See demo page.

Features

  • Animations with JavaScript
    It's a sort of manipulator to easily manipulate an element's transform property with JavaScript. You can freely play, pause and reverse the animation.

  • Web Animations API
    It preferentially uses Web Animations API, specifically element.animate() if supported.

Policy

  • Speedster
    It pursues speed than Swiss Army knife.

  • Minimalist
    It keeps it as simple and small as possible (3.3kb (minified and gzipped) for now).

Installation

npm:

$ npm install velvetjs

Bower(Deprecated):

$ bower install velvetjs

Usage

CommonJS:

var velvet = require('velvetjs');
var div = velvet(document.getElementById('div'));
div.weave({ translateX: 100 }, { durarion: 400 });

AMD:

require(['path/to/velvet'], function (velvet) {
    var div = velvet(document.getElementById('div'));
    div.weave({ translateX: 100 }, { durarion: 400 });
});

directly:

<script src="/path/to/velvet.min.js"></script>
<script>
    var div = velvet(document.getElementById('div'));
    div.weave({ translateX: 100 }, { durarion: 400 });
</script>

API

velvet([element])

  • element: One or more target elements. (optional)

The velvet function returns a Velvet object or a Textile object. If call this with a parameter, it returns a Velvet object. If omit the parameter, it returns a Textile object.

var v = velvet(document.getElementById(('div'));    // Returns a Velvet object
var t = velvet();   // Returns a Textile object

Velvet object

v.weave(styles, options)

  • styles: CSS Styles (transforms and opacity only)
  • options: Animation options

The weave method creates an animation. The details of arguments are as follows:

var w = v.weave({
    translateX: 100,    // (px)
    translateY: 200,    // (px)
    translateZ: 300,    // (px) Not supported in IE9
    scale: 1.5,     // Equivalent to { scaleX: 1.5, scaleY: 1.5 }
    scaleX: 2,
    scaleY: 2,
    scaleZ: 2,      // Not supported in IE9
    rotate: 30,     // (deg) Equivalent to { rotateZ: 30 }
    rotateX: 45,    // (deg) Not supported in IE9
    rotateY: 60,    // (deg) Not supported in IE9
    rotateZ: 30,    // (deg) Not supported in IE9
    skewX: 45,      // (deg)
    skewY: 45,      // (deg)
    perspective: 400,   // (px)
    opacity: 0.5
}, {
    delay: 1000,    // (ms)
    durarion: 400,  // (ms)
    easing: 'ease', // Any of 'linear', 'ease', 'ease-in', 'ease-out' and 'ease-in-out'
    oncancel: function () {
        // This is called when the animation is canceled.
    },
    onfinish: function () {
        // This is called when the animation is finished.
    }
});

NOTE: Don't append unit for these parameters. 100px -> 100

This method returns a Weaver object and the animation will automatically start.

v.style(styles)

  • styles: CSS Styles

The style method set styles to the element. Since the above weave method ignores the preset transform and opacity property, you need to set the styles if want to make started the animation from status different from default (position, size, etc.).

// fade-in
v.style({
    translateX: 100,
    opacity: 0
}).weave({
    opacity: 1  // The opacity will transition from 0 to 1
}, {
    duration: 400
});

You may also set other properties with this method.

v.style({
    position: 'absolute',
    left: '10px',   // In this case you need to append unit. 10 -> 10px
    top: '20px'
});

NOTE: Since this method will not take care of Vendor Prefix, for instance, you will need to set them like this:

v.style({
    '-webkit-transform-origin': 'left top'
    '-moz-transform-origin': 'left top'
    '-ms-transform-origin': 'left top'
    'transform-origin': 'left top'
});

Textile object

t.weave(from, to, options, cb)

  • from: An array of start values
  • to: An array of end values
  • options: Animation options
  • cb: A callback function called per frame

The weave method creates an animation other than transform and opacity. This is an example of scrolling a window:

var w = t.weave([0], [200], {
    delay: 1000,    // (ms)
    duration: 400,  // (ms)
    easing: 'ease', // Any of 'linear', 'ease', 'ease-in', 'ease-out' and 'ease-in-out'
    oncancel: function () {
        // This is called when the animation is canceled.
    },
    onfinish: function () {
        // This is called when the animation is finished.
    }
}, function (values) {
    // The scroll position will transition from 0px to 200px.
    window.scrollTo(0, values[0]);
});

It returns a Weaver object in the same way as v.weave method.

Weaver object

w.pause()

The pause method pauses the animation.

w.play()

The play method resumes the paused animation, or replays the stopped animation.

w.finish()

The finish method goes to the end position of the animation, and stops.

w.cancel()

The cancel method goes back to the start position of the animation, and stops.

w.reverse()

The reverse method reverses the current play direction, and starts to play the animation.

v.weave({
    translateX: 100
}, {
    durarion: 400,
    onfinish: function () {
        this.reverse(); // The animation will be endlessly repeated.
    }
});

w.direction()

The direction method returns current play direction. (1: forward direction, -1: backward direction)

Tips

Position Property

For better performance, set absolute or fixed to the element's position property.

#element {
    position: "absolute";
}

Combo Animations with Promise

In order to create Combo Animations use Promise like this:

var div = velvet(document.getElementById(('div'));

Promise.resolve().then(function () {
    return new Promise(resolve) {
        div.weave({
            translateX: 100     // The translateX will transition from 0 to 100.
        }, {
            duration: 400,
            onfinish: resolve
        });
    };
}).then(function () {
    return new Promise(resolve) {
        div.weave({
            translateY: 100     // The translateY will transition from 0 to 100.
        }, {                    // The X will remain at the same position (100px).
            duration: 400,
            onfinish: resolve
        });
    };
}).then(function () {
    return new Promise(resolve) {
        div.weave({
            translateX: 0,
            translateY: 0       // These will transition from 100 to 0.
        }, {
            duration: 400,
            onfinish: resolve
        });
    };
});

TODO

  • Proper test
  • ~~Multiple elements control~~
  • Customizing cubic bezier
  • Vendor Prefix support for style method
  • Returning a Promise

Supported browser

Chrome, Firefox, Safari, Opera, Android Browser 4.0+, iOS Safari, Edge and IE9+

Lisence

MIT