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
- [x] Allow keyframes to accept properties with value arrays (and let JustAnimate figure out the actual keyframes)
- [x] Change call order of Just.animate() to be more in line with other animation libraries
- [x] Prep for transition support (when the ending properties are provided and the starting properties are taken from the target)
- [x] Remove animateSequence and bake it into JustAnimate as an additional .animate() function
- [x] Flatten timings calls into the options above them
- [x] add time notation to duration ("2s" instead of 2000 (ms))
- [x] ~~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
- [x] rebuild timeline api to be simpler
- [x] 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
}
]
});