just-animate / just-animate Goto Github PK

Making Animation Simple

Home Page: https://just-animate.github.io/

JavaScript 4.03% TypeScript 95.97%

animation typescript web-animation waapi transitions animation-controller multiple-animations easings timeline css-variables

just-animate's People

Contributors

Stargazers

Watchers

Forkers

peterdavehello ron-yu ctsanders1 azat74 foxchen alvarlaigna john-demmitt l3dlp-sandbox umarmughal catalinmiron vanthaiunghoa unforeseenocean ozdeleon chavansumit digital-octopus-dev guillem-paris jlevbury

just-animate's Issues

Add .animate() support for css selectors

Add transform compositing for property syntax

Add a transform compositing strategy field and default it to add and could be changed to replace. For example:

just.animate({
     to: '2s', 
     targets: '.element',
     css: {
         transformComposite: 'add',
         rotate: [0, '90deg', '360deg'],
         x: [0, '40px']
     }
})

'add' would translate to

just.animate({
     to: '2s', 
     targets: '.element',
     css: [
         { transform: 'translatex(0) rotate(0)' },
         { transform: 'translatex(20px) rotate(90deg)' },
         { transform: 'translatex(40px) rotate(360deg)' }
     }
})

Whereas with 'replace', it would translate to

just.animate({
     to: '2s', 
     targets: '.element',
     css: [
         { transform: 'translatex(0) rotate(0)' },
         { transform: 'rotate(90deg)' },
         { transform: 'translatex(40px) rotate(360deg)' }
     }
})

Alternatively, the commands could be reduced to 4x4 or 3x3 matrices and combined that way. In that scenario, waapi would always be sent matrix or matrix3d

Add +/-= notation to all css properties

Add the ability to use the '+=100px' notation to all CSS properties

just.animate({
     css: [
          { x: '+=200px', y: '-=200px' }
     ]
})

Skew transform properties are not correct

skew should be a string instead of a number
there is no skew3d and skewz

Add support for JQuery elements

Add the ability to pass JQuery objects to .animate. This will make jquery and angular use cases more natural.

Add SVG CSS properties to TypeDef files

Missing Fill, Stroke, etc.

Create helper function for splitting the text in an element into individual spans

The following code

const innerElements = just.splitText('h1');

would change

<h1>Test</h1>

<style>.char{display:inline-block}</style><h1><span class="char">T</span><span class="char">e</span><span class="char">s</span><span class="char">t</span></h1>

Add target and targets to onupdate context

just.animate({
    to: 2000,
    targets: '.target'
    onupdate(ctx) {
         ctx.target; // provides target that is being updated
         ctx.targets; // provides full list of targets from "targets"
    }
})

Add NativeScript support

NativeScript has great integration with Angular2. The animation api for NativeScript is different than Web Animations API but should be compatible enough to bridge for their subset of properties:

https://docs.nativescript.org/ui/animation.html

view.animate({
    translate: { x: 0, y: 100},    
    duration: 1000,
    curve: enums.AnimationCurve.easeIn
});

Some obvious items are:

bridging JustAnimate.animate() => view.animate()
adding animation curve definitions like nativescript and backporting existing easings
creating property maps between NativeScript properties and web animation properties
translateX: 5 => tranform: ''translateX(5)"
- updating existing animations to use the shorthand versions
- detecting if the environment is NativeScript if possible and switching to that provider or providing an alternate version to import e.g.: import { JustAnimateNS } from 'just-animate';

Process transform shorthand props in a different order

What order should the shorthand properties: skew, rotate, translate, and scale be in?

cssVar() helper

It is helpful in some situations to access the current value of a CSS Variable. Rather than adding this into the code, I propose we add the following property value helper:

function cssVar(name) {
   return t => getComputedStyle(t).getPropertyValue(name)
}


// then usage
import { cssVar } from 'just-animate/extras'

strokeDashoffset: [cssVar('--targaryen-head'), 0]

This is a simple implementation, we may want to do additional work to reduce using getComputedStyle when this is used in multiple places.

I'm using just animate combined with polymorph to animate a svg object. The animation looks good, but it seems that the stagger property is not being set, the animation runs without stoping between the path sequences.

  var shape = just.animate({
    targets: '#shape14_target',
    duration: 40000,
    stagger: 2500,
    props: {
      d: {
        interpolate: svgMorph,
        easing: 'easeInOut',
        value: [
              '#shape14_state1 path',
              '#shape14_state2 path',
              '#shape14_state3 path',
              '#shape14_state4 path',
              '#shape14_state3 path',
              '#shape14_state2 path',
              '#shape14_state1 path'
            ]
      }
    }
  })

  shape.play('Infinity');

add test suite for helper functions

Bindings for VueJS 2.0

Look into creating bindings for VueJS

Allow '1.2s' and '+=200ms' notation on delays

Add support for delays as a time string

// basic support
just.animate({
    targets: '.target',
    mixins: ['fadeIn'],
    delay: '1.2s'
})

// staggered time
just.animate({
    targets: '.target',
    mixins: ['fadeIn'],
    delay: '+=100ms'
})

Add "references" feature to support devtools

The "refs" feature is going to allow a person to swap out parts of the timeline quickly by defining those parts as refs at initialization.

Proposed usage:

var t1 = just.timeline({
    refs: {
        target: pixiObj
    }
})

t1.add({
     targets: '@target',
    /* ... */
})

At first glance, it seems like targets will always have to be evaluated immediately because of stagger.

Create typescript definition files for each target

Create typescript definition files for jquery, angular, and basic builds.

Improve test coverage for /plugins/waapi/KeyframeTransformers

Add at least one test case per function in KeyframeTransformers

CSS Properties don't mixin properly

just.register({
    name: 'fadeIn',
    css: {
          opacity: [0, 1]
    }
});

just.register({
    name: 'slideIn',
    css: {
        x: ['-200px', 0]
    }
});


just.animate({
      mixins: ['fadeIn', 'slideIn']
});

// should be
just.animate({
    css: [
         { opacity: 0. transform: 'translatex(-200px)' },
         { opacity: 1. transform: 'translatex(0)' },
    ]
})

It takes the first mixin and disregards the css properties on subsequent mixins

Allow to/from to be specified as functions

Allow the following

just.animate({
    to() {
        return just.random(200, 600) + 'ms';
    }
    from() {
        return just.random(600, 800) + 'ms';
    }
})

[question] is WAAPI required?

I read from https://just-animate.github.io/basic-usage/

This guide assumes the web plugin (Web Animations API) is installed.

Just want to confirm that in order to have just-animate work, WAAPI is required. In other words, a WAAPI polyfill is probably needed in production for all users.

CSS Property Syntax doesn't work consistently when there are more than 2 properties

using css: { opacity: [1,0,1] } performs a fadeOut. It should perform a fadeOut and then another fadeIn

Add computedOffset to onupdate context

just.animate({
    to: 2000,
    targets: '.target'
    onupdate(ctx) {
         ctx.computedOffset // offset after easing function is applied
    }
})

Just Animate 3 Release date & Changelogs

Can we have Just Animate 3 release date and some changelogs

Add element provider function to .animate()

Add the ability to use a function instead of an element in .animate(). The function will be called when the element is needed. This will support more sophisticated use cases and will work nicely with arrow functions:

Just.animate(function() {
  return document.getElementById('some-element');
});

Just.animate(() => document.getElementById('some-element'));

Using in Web Components (animating inside Shadow DOM)

Fantastic library! Thanks for all your work.

I’m just getting started with just-animate, so I might be missing something obvious – how can I use this within a web component shadow DOM?

I’m building a web component using Stencil, and I’d like to bake in some animations using just-animate. When I build the component, just-animate is clearly working properly (including the awesome player widget), but I’m not able to target elements inside the Shadow DOM. (Other matching targets outside of the component animate as expected.)

Anyone tried using just-animate in a Stencil web component? How can I get just-animate to target nodes inside the element?

Overload .play(iterations) to provide infinite repeating of a timeline

Since there isn't opportunity to provide playback options for the timeline as a whole, Allow the user to provide options when calling play

MAYBE

just.animate({
      to: '1s',
      targets: '.element',
      mixin: 'fadeIn'
})
.play(Infinity);

just.animate({
    to: '1s',
    targets: '.element',
    mixin: 'fadeIn'
})
.play({
    direction: 'alternate',
    iterations: 2
});

Add sequence function to support chaining together multiple animations

Add the ability to chain animations together in sequence.

Just.sequence(function(builder) {
    return builder
        .fadeIn(el)
        .wait(3000)
        .fadeOut(el)
        .fadeIn(el2)
        .wait(1000)
        .fadeOut(el2);
});

Just.sequence(builder => builder
        .fadeIn(el)
        .wait(3000)
        .fadeOut(el)
        .fadeIn(el2)
        .wait(1000)
        .fadeOut(el2));

Add guard to to/from to prevent out of range errors

Throw an error for situations like this

just.animate({
    to: 1000,
    from: 2000
})

Could you provide the minified file?

Hello @notoriousb1t ,
I am the member of cdnjs project.
We want to host this library.
But there is a question want to ask.
Could you provide the minified file for just-animate-systemjs.js on npm?
Thanks for your help!

cdnjs/cdnjs#8336
cdnjs/cdnjs#8344

Animation option builder in Just.animate()

Allow a function to be passed to Just.animate() to build the animation options instead of using an object for the keyframes and then an object for the timings.

Possible function based approach:

function rotateIt(e) {
    return e.from({ rotateX: '0' })
            .at(0.5, { rotateX: '90deg' })
            .to({ rotateX: '0' });
}

var timing = { duration: 1000, fill: 'none' };
var player = Just.animate(rotateIt, $element, timing);

Current object based approach

var rotateIt = [
    { offset: 0, rotateX: '0' },
    { offset: 0.5, rotateX: '90deg' },
    { offset: 1, rotateX: '0' }
];

var timing = { duration: 1000, fill: 'none' };
var player = Just.animate(rotateIt, $element, timing);

cannot find ./core/Helpers in some environments

Maybe a casing issue

selectPath() helper

When doing SVG morphs with Flubber, getting the path data required extra code that made the experience not as great as it could have been. I propose the following helper to make it easier to select path data:

function selectPath(selector) {
   return () => {
        const el = document.querySelector(selector)
        if (el == null) {
            return '' // or throw error
        }
        return el.getAttribute('d')
   }
}


// then usage
import { selectPath } from 'just-animate/extras'

var t1 = just.animate({
    targets: '#my-target',
    duration: 1000,
    props: { 
        d: [selectPath('#charmander'), selectPath('#charmeleon')] 
    }
})

[question] React support / integration?

I think it might take something like https://github.com/bringking/react-web-animation in order to use this library with React?

Add CamelCase Keyframe properties to TypeDef files

Add alternatives to hyphenated keyframe properties. For examples:

transform-origin needs transformOrigin added as an alias
background-color needs backgroundColor added as an alias

Add range notation ("100to200ms", "+=100to200ms", "-=100to200ms")

To all css properties that take a time, distance, or measurement

just.animate({
    css: {
        x: '+=100to200px',
        // x(target, index, targets) {  return index * 100 + just.random(0, 100, 'px') }
    }
})

Invalid calling object IE11

Invalid calling object in this output code

    function isFunction(a) {
        return toString.call(a) === functionTypeString;
    }

Switch Object.prototype.toString to ({}).toString and test

Improve the look and feel of animate.css mixins

Revisit and modify API

Need to revisit the API contracts. Because of how the signatures evolved, there are situations where the user's code would be hard to read and there are missed opportunities to create a simple experience. I think for the 1.0.0 release, the API should be overhauled to address some of the issues

Allow keyframes to accept properties with value arrays (and let JustAnimate figure out the actual keyframes)
Change call order of Just.animate() to be more in line with other animation libraries
Prep for transition support (when the ending properties are provided and the starting properties are taken from the target)
Remove animateSequence and bake it into JustAnimate as an additional .animate() function
Flatten timings calls into the options above them
add time notation to duration ("2s" instead of 2000 (ms))
~~add "at" property of timings that uses actual time instead of offset. offset will be calculated based on the duration~~ added to and from properties to express duration. In simple cases to is equivelant to existing uses of duration, but makes sense with a timeline
rebuild timeline api to be simpler
detect initial values from dom when an option is passed

Before

// registration
Just.register({
  name: 'rainbow',
  keyframes: [
    { 'background-color': 'white' },
    { 'background-color': 'red' },
    { 'background-color': 'orange' },
    { 'background-color': 'yellow' },
    { 'background-color': 'green' },
    { 'background-color': 'blue' },
    { 'background-color': 'indigo' },
    { 'background-color': 'violet' }
  ], 
  timings: { 
    duration: 5000, 
    fill: 'both',
    iterations: 1
  }
});

// call registered animation
Just.animate('rainbow', '#target2');

// call registered animation with overrides
Just.animate('rainbow', '#target2', { duration: 1000 });

// call inline animation
var keyframes = [
  { opacity: 0 },
  { opacity: 0.4, offset: 0.2 },
  { opacity: 1 },
];

var timings = {
  duration: 2000,
  fill: 'forwards',
  easing: 'ease-out'
}
Just.animate(keyframes, '#target3', timings);

// animate a sequence
Just.animateSequence({
    steps: [
      { 
        el: '#target1',
        name: 'fadeIn'
      },
      { 
        el: '#target2',
        name: 'fadeOut'
      }
    ],
    autoplay: true
});

// call timeline
Just.animateTimeline({
    autoplay: true,
    duration: 5000,
    events: [
        {
            offset: 0,
            el: '#target1', 
            keyframes: [
                { translateX: 0 },
                { translateX: '-700px' }
            ],
            timings: {
                duration: 4200,
                fill: 'both',
                easing: 'ease-in'
            }
        },
        {
            offset: 0.1,
            el: '#target2', 
            name: 'rubberBand',
            timings: {
                iterations: 1
            }
        }
    ]
});

After

// register animation/transition
Just.register({
  name: 'rainbow',
  duration: 5000, 
  fill: 'both',
  properties: {
    backgroundColor: ['white', 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']
  }
});

// call registered animation/transition
Just.animate('#target2', 'rainbow');

// call registered animation/transition with overrides
Just.animate('#target2', {
  name: 'rainbow',
  duration: "1s"
});

// call inline animation/transition
Just.animate('#target3', {
  keyframes: [
    { opacity: 0 }, 
    { opacity: 0.4, at: '400ms' }, 
    { opacity: 1 }
  ],
  duration: "2s",
  fill: 'forwards',
  easing: 'ease-out'
});

// animate a sequence
Just.animate('#target1', 'fadeIn')
  .animate('#target2', 'fadeOut');

// call timeline
Just.timeline({
    autoplay: true,
    duration: '5s',
    events: [
        { 
           target: '#target1',
           from: 0,
           to: '4.2s'
           fill: 'both',
           easing: 'ease-in'
           properties: {
              translateX: [0, '-700px']
           }
        },
        { 
           target: '#target2',
           from: '500ms',
           name: 'rubberBand',
           iterations: 1
        }
    ]
});

Add onIteration hook

just.animate({
  targets: '.confetti',
  onIteration: function (ctx) {
     // log current iteration
     console.log(ctx.iteration);
  }
  /* ... */
})

should have the same behavior as

just.animate({
  targets: '.confetti'
  /* ... */
}).on('iteration', function (ctx) {
   // log current iteration
   console.log(ctx.iteration);
})

module not found when using typescript import the web module.

Here is how I import the web module:

import { waapiPlugin } from 'just-animate/web';

Did I do something wrong?

Change just.random behavior

Make the following changes to just.random()

add a third optional argument for unit. If a unit is null or undefined, return a number. If unit is not null or undefined, return a string with that unit as a suffix
add a fourth optional argument that is true if the result should have floor applied. It should default to false

add test specs for animate.css animations

Multiple offsets in the same keyframe don't appear to work

http://codepen.io/notoriousb1t/pen/WGzdWz

just.animate({
   targets: '.box',
   to: '1.6s',
   css: [
      { offset: [0, 1], opacity: 1 },
      { offset: .5, opacity: 0 }
   ],
   iterations: Infinity,
   easing: 'ease-in-out'
});

WAAPI iterations Infinity behavior

Remove support for iterations: Infinity on individual keyframes. Blocked by Infinite timeline playback

Move finish function to a property of on

Create "on" property and subscribe all properties to each animation.
Move finish from top level to a property of on

error: rotateZ must be a property

Remove keyframe properties with undefined/null/empty strings. If a keyframe has a property that doesn't have a value, it should be ignored.

Add create hook

Provide a create hook for modifying the target prior to starting the animation.

Before:

just.animate({
  targets: function () {
    var confetti = document.querySelectorAll('.confetti')
    for (var i = 0, len = confetti.length; i < len; ++i) {
      confetti[i].innerHTML = '<div class="rotate"><div class="askew"></div></div>'
    }
    return confetti
  },
  /* ... */
})

After

just.animate({
  targets: '.confetti',
  on: {
    create(target, index, targets) {
      target.innerHTML = '<div class="rotate"><div class="askew"></div></div>'
    }
  }
/* ... */
});

Add support for Animation Sheets

Support the ability to play animations on a timeline. Possible usage:

var player = Just.animateSheet({
    duration: 3000,
    events: [
        {
            offset: 0,
            name: 'fadeIn',
            el: '.target',
        },
        {
            offset: 0.3,
            name: 'fadeOut',
            el: '.target'
        },
        {
            offset: 0.6,
            name: 'fadeIn',
            el: '.target2',
        },
    ]
});

Over the course of 3000ms:

At 0%, elements with class target will fade in
At 30%, elements with class target will fade out
Ad 60%, elements with class target2 will fade in

Player returns an IAnimation, so it supports play, reverse, cancel, etc. like all other animations.

If a subanimation's duration is past the duration of the sheet, the animation will cancel at the end. If the player calls reverse, the subanimation will start from the point it would have been canceled.

Add transitions

Just Animate can animate when specifying the start and end states of the elements. I think a way to transition from wherever an element currently is to a new state would add a lot of value. Problems to solve:

standalone transitions, perhaps make .animate() more forgiving when missing properties
transitions in sequences (maybe a way to fold transitions into the sequencer or a promise chain)
transitions in timelines (maybe provide additional logic and prefill keyframes based on expected state of the element at that point of the animation

Possible Simple transition to

Just.transition({
     el: '#element',
     timings: { duration: 1000 },
     to: { translateX: '100%'  }
});

Possible chaining transitions to create sequences

Just.transition({
        el: '#element',
        timings: { duration: 1000 },
        to: { translateX: '100%' , skewX: '20deg' } 
    })
    .wait(250)
    .transition({
        el: '#element',
        timings: { duration: 1000 },
        to: { translateX: '0'  } 
     });

just-animate / just-animate Goto Github PK

just-animate's People

Contributors

Stargazers

Watchers

Forkers

just-animate's Issues

Some obvious items are:

Recommend Projects

Recommend Topics

Recommend Org

Jobs