transient

    2.0.1 • Public • Published

    Transient

    NPM Version NPM Downloads JavaScript Style Guide

    image

    A simple and minimal animation loop. Consistent frame rate's are achieved with requestAnimationFrame and high resolution timing. This library is great for simple transition animations, thus the name, but can also be used for complex animations.

    Usage:

    const Animation = require('transient')
    const el = document.getElementById('.my-element')
     
    // Create the animation
    var fadeIn = new Animation({
      duration: 1500, // 1.5 seconds
      draw: function (progress) {
        // progress is an integer between 0 and 1
        el.style.opacity = progress;
      }
    })
     
    // Start the animation
    fadeIn.start()

    Options:

    • duration: The animation duration in milliseconds. default: 5000
    • fps: Consistant frames per second for the animation. default: 60
    • loop: Should the animation loop? default: false
    • draw: The draw function which is called for each loop.
    • onEnd: A function to call when the animation is finished.
    • onCancel: A function to call when the animation is canceled. If this is not specified it will call the onEnd function

    Advanced Usage

    This package's main export is perfect for handling single animations, but it also exports a loop for more complex work. A single loop can be started for general animation use, and many Transient animation instances can be attached to one loop. Here is an example:

    const Animation = require('transient')
    const Loop = require('transient/loop') // or const Loop = Animation.Loop
     
    // Only use one loop to syncronize the animations
    var l = new Loop()
     
    var moveBackground = new Animation({
      duration: 1000 * 10, // 10s
      animationLoop: l,
      draw: function (progress) {
        // Draw background
      }
    })
    var moveForeground = new Animation({
      duration: 1000 * 5, // 5s
      animationLoop: l,
      draw: function (progress) {
        // Draw foreground
      }
    })
     
    // Start the animations
    moveBackground.start()
    moveForeground.start()

    Keywords

    none

    Install

    npm i transient

    DownloadsWeekly Downloads

    4

    Version

    2.0.1

    License

    ICS

    Last publish

    Collaborators

    • wesleytodd