frame-seq

    0.2.1-a • Public • Published

    frame-seq

    Custom HTML element to animate nested images.

    Early alpha. Preloading not implemented yet so it will stutter through first playthrough.

    Not a lot of demo stuff yet, but there is my basic test suite.

    Features

    Current

    • playback of any nested elements in sequence
    • playback direction control
    • autoplay
    • looping
    • fps control
    • simple events

    TBD before v1:

    • pingpong playback
    • buffering
    • preloading
    • folder-based image sequences
    • size mismatch management
    • finer-grained events

    Post v1

    • Onion skinning

    Usage

    To use, embed JS file in dist and add the <frame-seq> element to your HTML. Any elements nested inside will be played back in order of the HTML.

    <frame-seq>
        <img src="imgseq01.jpg" ... >
        <img src="imgseq02.jpg" ... >
        <img src="imgseq03.jpg" ... >
        <img src="imgseq04.jpg" ... >
        <img src="imgseq05.jpg" ... >
        <img src="imgseq06.jpg" ... >
        <img src="imgseq07.jpg" ... >
        <img src="imgseq08.jpg" ... >
        <img src="imgseq09.jpg" ... >
        <img src="imgseq10.jpg" ... >
    </frame-seq>

    Attributes

    • fps - Playback speed (frames-per-second). Default 12.
    • autoplay - Boolean: Begin playback as soon as element is rendered.
    • reverse - Boolean: Playback is in opposite direction.
    • pingpong - Boolean: Doesn't do anything yet.
    • loop - Boolean: Playback automatically loops (regardless of direction).
    • width - Doesn't do anything yet.
    • height - Doesn't do anything yet.
    • preload - Boolean: Doesn't do anything yet.

    Properties

    All attributes are also expressed as properties. Additional properties are:

    • currentFrame - The current playhead position (starting at 1).
    • totalFrames - The total number of frames in the animation (read-only).
    • duration - The total running time of the animation, based on the current FPS (read-only).
    • playing - Boolean: Whether the animation is currently playing (read-only).
    • paused - Boolean: Whether the animation is currently paused (read-only).
    • stopped - Boolean: Whether the animation is currently stopped (read-only).

    Methods

    These methods will almost certainly be thinned out in a future version.

    • play()
    • pause()
    • resume()
    • stop()
    • gotoAndPlay(frame)
    • gotoAndResume(frame)
    • nextFrame()
    • prevFrame()

    Events

    • stateChanged - When the playback state has changed or any attribute is modified.
    • enterFrame - At the beginning of each redraw.

    Install

    npm i frame-seq

    DownloadsWeekly Downloads

    16

    Version

    0.2.1-a

    License

    MPL-2.0

    Unpacked Size

    78.7 kB

    Total Files

    16

    Last publish

    Collaborators

    • adasha