https://github.com/adasha/frame-seq

Custom HTML element to animate nested images. Early alpha.
https://github.com/adasha/frame-seq

animate animation custom-elements frames gif-animation html images nesting playback video

Last synced: about 9 hours ago
JSON representation

Custom HTML element to animate nested images. Early alpha.

• Host: GitHub
• URL: https://github.com/adasha/frame-seq
• Owner: Adasha
• Created: 2018-07-30T10:41:34.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-02-22T19:10:15.000Z (over 1 year ago)
• Last Synced: 2024-09-27T14:01:49.902Z (about 9 hours ago)
• Topics: animate, animation, custom-elements, frames, gif-animation, html, images, nesting, playback, video
• Language: JavaScript
• Homepage: http://lab.adasha.com/components/frame-seq
• Size: 289 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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](http://lab.adasha.com/frame-seq).

## 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 `` element to your HTML. Any elements nested inside will be played back in order of the HTML.

```HTML

    

    

    

    

    

    

    

    

    

    

```

### 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.