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

f1-dom

v9.1.1

Published

f1 animation parsing functions for the dom

Downloads

194

Readme

f1-dom

experimental

f1-dom wraps f1 to animate style's of dom elements. f1 is a UI animation library where you first define all the states of your UI and then by defining transitions between those states. For more information check out f1's documentation

chief is also exposed in the f1-dom module via require('f1-dom/chief'). For more information on chief see chief's documentation

Usage

NPM

See the example running here in Requirebin.com

var f1DOM = require('f1-dom');
var elButton;
var button;

// data-f1 defines an association with states
// which are later defined when creating an f1 instance
document.body.innerHTML = 
'<div data-f1="elButton">' +
  '<div data-f1="text">Im a button</div>' +
'</div>';

button = f1DOM({
  // define the container where your button lives
  el: document.body,
  
  // define what your button will look like in each state: out, idle
  states: {
    idle: {
      elButton: {
        style: {
          padding: 10, // padding: 10px
          margin: 10, // margin: 10px
          backgroundColor: [ 255, 0, 255 ], // rgb(255, 0, 255)
          cursor: 'pointer', // we can change this so why not
          alpha: 0, // Using alpha sets visbility: hidden when at 0 to prevent mouse events
          display: 'inline-block'
        }
      },

      text: {
        style: {
          color: [ 33, 33, 33 ], // rgb(33, 33, 33)
          rotate: [ 0, 0, 0 ] // transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)
        }
      }
    },

    over: {
      elButton: {
        style: {
          padding: 20, // padding: 20px
          margin: 0, // margin: 0px
          backgroundColor: [ 255, 0, 0 ], // change the rgb values
          cursor: 'progress', // we can change this so why not
          alpha: 1, 
          display: 'inline-block'
        }
      },

      text: {
        style: {
          color: [ 255, 255, 255 ], // rgb(255, 255, 255)
          rotate: [ 0, 0, 15 ] // transform: rotateX(0deg) rotateY(0deg) rotateZ(15deg)
        }
      }
    }
  },

  // define transitions between states (for info on how to write
  // fancier animations check out f1's documentation)
  transitions: [
    { from: 'idle', to: 'over', bi: true }
  ]
})
.init('idle'); // initialize the button in the out state defined in states


elButton = document.querySelector('[data-f1]');

// `go` will tell the button to go to the state defined
elButton.onmouseover = function() { button.go('over'); };
elButton.onmouseout = function() { button.go('idle'); };

CSS Handling

f1-dom does a few things to make css properties more animatable.

Adds PX to the end of certain properties

If values for properties such as left, height, padding, margin, etc. are passed in as Numbers f1-dom will automatically add px to the end.

Color handling

In order to animate color's properties such as color and backgroundColor arrays can be passed instead which are converted to either rgb or rgba css values.

transform and transformOrigin

To animate transform just pass in arrays containing values for translate, scale, and rotate. For instance passing in translate: [100, 200, 300] this will be converted to:

transform: translateX(100px) translateY(200px) translateZ(300px)

transformOrigin can be passed as an array such as transformOrigin: [0, 1] which will be converted to:

transformOrigin: 0% 100%

alpha

Using the keyword alpha (or autoAlpha to mimic gsap) instead of opacity will tween the opacity as you would expect, but it will also set the visibility property. It will set visibility to hidden when opacity is set to 0 and visible all other times. This will ensure hidden elements will not respond to mouse events.

License

MIT, see LICENSE.md for details.