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

@sifrr/animate

v0.0.3

Published

Sifrr animation library. Animate any mutable object's property(s) in JS using requestAnimationFrame.

Downloads

1

Readme

sifrr-animate · npm version

~1kb library to Animate any mutable object's properties using requestAnimationFrame with promise based API.

This is a basic level library, which can be used to create complex animations as well like anime.js, using keyframes, delay and loop.

Note: Since it uses requestAnimationFrame, actual time taken to animate can vary +1 frame (~17ms for 60fps)

Size

| Type | Size | | :----------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | | Normal (dist/sifrr.animate.js) | Normal | | Minified (dist/sifrr.animate.min.js) | Minified | | Minified + Gzipped (dist/sifrr.animate.min.js) | Minified + Gzipped |

Usage

import { animate, wait } from '@sifrr/elements';

animate({
  target: ,
  targets: ,
  to: { // exmaple
    prop1: 'to1',
    prop2: 'to2',
    porp3: ['from3', 'to3'],
    style: { // multi level properties example
      width: '100px'
    }
  },
  time: 300, // default = 300
  type: 'spring', // default = 'spring' which is basically cosine curve
  round: false, // default = false
  onUpdate: () => {},
  delay: 1000 // animate after waiting for 1 second, default = 0
}).then(() => {
  // do something after animation is complete
})

// animate after waiting for 1 second
// same as delay, but for more control over animation timeframes
// You can create very complex animations using wait, animate and loops
wait(1000 /* in ms */).then(() => {
  animate({...});
})
  • target(s) - object(s) whose properties you want to animate, target is single object, targets is array of object
  • to - properties with final values you want to animate to.
  • time - time taken to animate (in ms)
  • type - type of animation (pre added: ['linear', 'ease', 'easeIn', 'easeOut', 'easeInOut', 'spring']). type can also be a bezier array or function which takes x value between (0,1) and returns corresponding y value.
  • round - round off animated values or not
  • onUpdate - this function will be called on update with arguments object, property, currentValue, doing heavy lifting here can cause laggy animation
  • delay - (in miliseconds) number or function, delay before start of animation (in ms)

If from values are not given (or object doesn't have that property), they will start from 0. If a function for time, delay, to is given, it will be called with index of target to animate (starting from 0) and return value will be used as corresponding value for that target. this inside these functions is target.

You can add more types using bezier function values:

import { types } from '@sifrr/elements';

types['customType'] = [.42, 0, .58, 1]; // bezier array
// then use
animate({ type: 'customType' ...})

Format

Property's current/from value and to value should be of same format (strings around numbers should be same).

  • Number
  • string with multiple numbers to animate, examples:
    • '123'
    • 'p123'
    • '123s'
    • 'abcd 1234 fed 45'
    • 'aaaaaa123aaaa123aaaaaa123aaaaaa'

OR

Relative to, to can be relative number as well

  • if from is 100px, and to is +=20px, then final value will be 120px
  • if from is 100px, and to is -=20px, then final value will be 80px
  • if from is 100px, and to is *=2px, then final value will be 200px
  • if from is 100px, and to is /=5px, then final value will be 20px

Advanced usages

import { keyframes, loop } from '@sifrr/animate';

// each animateOpts1 is valid options object for animate function
// returns a promise that resolves after all the animations are complete
keyframes([animateOpts1, animateOpts2, [ animateOpts3, animateOpts4 ], animateOpts5]);

// this will execute the timeline:
// <---1--->
//          <---2--->
//                   <---3--->
//                   <---4--->
//                            <---5--->
//                                     Promise resolved

// loop will execute the function on loop consecutively after previous promise is resolved
loop(() => /* return any promise, eg. animate(...options), keyframes([...options]), etc */)

Standalone files

<script src="https://unpkg.com/@sifrr/animate@{version}/dist/sifrr.animate.min.js"></script>
// for v0.0.3, version = 0.0.3

then use

Sifrr.animate({...});
Sifrr.animate.keyframes([...]);
Sifrr.animate.wait(100);
Sifrr.animate.types;

Examples

https://sifrr.github.io/sifrr-animate/showcase/