Neurotic and Probably Misinformed

    @easylogic/anipa

    0.0.11 • Public • Published

    Anipa

    JS Animation Library with timeline

    How to use in Browser

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@easylogic/anipa@0.0.6/dist/main.js"></script>
    <script type="text/javascript">
    var Player = anipa.Player; 
    </script>

    How to use in es6

    npm install --save @easylogic/anipa
    import { Player } from '@easylogic/anipa'

    JS Animation

    var player = new anipa.Player([
        {selector: '.sample', properties: [
            {
            property: 'width', 
            keyframes: [ 
                [500, '0%'],
                [3000, '100px'],
                [5000, '10px']
            ]
            },
            {
            property: 'height', 
            keyframes: [ 
                [1000],
                [2000, '100px']
            ] 
            }//,
            // {
            //   property: 'background-image',
            //   keyframes: [
            //     [0, 'background-image: linear-gradient(0deg, white 10%, blue 50%, yellow 100%)'],
            //     [2500, 'background-image: linear-gradient(3600deg, white 10%, blue 20%, red 100%)'],
            //     [5000, 'background-image: linear-gradient(1200deg, white 10%, red 20%, blue 100%)']
            //   ]
            // }
        ]}
        ], {
        duration: 5000,
        iterationCount: 0,
        direction: 'alternate'
    })
    player.play();

    Animatable Type

    Type Value
    {color} rgba(0, 0, 0, 1)
    yellow
    {length} 10px
    10%
    10em
    {number} 10
    0.3434
    {boolean} "alternate"
    "normal"
    {rotate} 10deg
    0.5turn
    {border-radius} 10px
    10px 10px 10px 10px
    {border} border:1px solid black;border-top:10px solid yellow; ....
    {filter} blur({length}) hue-rotate({rotate}) ...
    {clip-path} none
    circle()
    ellipse()
    inset()
    polygon()
    , ...
    {transform} translateX({length}) translateY({length}) rotate({$rotate}) ...
    {path} "M 20 30 L 20 50 Z"
    {polygon} "30,20 50,80 90,200"
    {text} "Insert a text"

    Animatable Properties

    Single Value Type

    Property Value Type
    background-color {color}
    color {color}
    text-fill-color {color}
    text-stroke-color {color}
    fill {color}
    stroke {color}
    border-color {color}
    border-top-color {color}
    border-left-color {color}
    border-right-color {color}
    border-bottom-color {color}
    Property Value Type
    left {length}
    top {length}
    width {length}
    height {length}
    perspective {length}
    font-size {length}
    font-stretch {length}
    font-weight {length}
    text-stroke-width {length}
    border-width {length}
    border-top-width {length}
    border-left-width {length}
    border-right-width {length}
    border-bottom-width {length}
    Property Value Type
    fill-opacity {number}
    opacity {number}
    stroke-dashoffset {number}
    Property Value Type
    mix-blend-mode {boolean}
    fill-rule {boolean}
    stroke-linecap {boolean}
    stroke-linejoin {boolean}
    border-style {boolean}
    border-top-style {boolean}
    border-left-style {boolean}
    border-right-style {boolean}
    border-bottom-style {boolean}
    Property Value Type
    rotate {rotate}
    Property Value Type
    text {text}

    Multi Value Type

    Property Value Type
    background-image background-image: {image};
    background-position: {length} {length};
    background-size: {length} {length};
    background-repeat: {boolean};
    background-blend-mode: {boolean}
    offset-path {pathLayerId},{distance:length},{rotateStatus:boolean},{rotate:rotate}
    box-shadow {offsetX:length} {offsetY:length} {blurRadius:length} {spreadRadius:length} color:color}
    , ...
    text-shadow {offsetX:length} {offsetY:length} {blurRadius:length} {color:color}
    , ...
    border-radius {border-radius}
    border {border}
    filter {filter}
    backdrop-filter {filter}
    clip-path {clip-path}
    transform {transform}
    transform-origin {length} {length}
    perspective-origin {length} {length}
    stroke-dasharray {number} {number}
    d {path}
    points {polygon}

    Development

    git clone https://github.com/easylogic/anipa 
    cd anipa
    npm install 
    npm run dev 
    

    Build

    npm run build
    

    License : MIT

    Install

    npm i @easylogic/anipa

    DownloadsWeekly Downloads

    0

    Version

    0.0.11

    License

    MIT

    Unpacked Size

    527 kB

    Total Files

    155

    Last publish

    Collaborators

    • easylogic