notoriousb1t

Just Animate

Just Animate is an easy to use JavaScript animation library that I have been putting together since February. I'm really excited about what it can do so far, and I would love to hear suggestions or have contributions to make it even better!

Animating Elements

Using Just Animate, I can animate elements forward and backward. I can also stop an animation in play, fast forward to the end, and reset back to the initial state.

var player = Just.animate('fadeIn', '.my-class');  
player.pause();  
player.play();  
player.reverse();  
player.cancel();  
player.finish();  

In the example, fadeIn is a default animation that comes with the library based on fadeIn from Animate.css. Here is an interactive example on CodePen:

See the Pen Just Animate - Basic by Christopher Wallis (@notoriousb1t) on CodePen.

Registering Custom Animations

I can also register my own project-specific animations by passing an array of each keyframe and passing timing information.

Just.register({  
  name: 'fadeIn2',
  keyframes: [
    { opacity: 0 },
    { opacity: 1 }
  ], 
  timings: { 
    duration: 1000, 
    fill: 'both'
  }
});
Just.animate('fadeIn2', '#target');  



Here is a CodePen that shows this by animating the background each color of the rainbow:

See the Pen Just Animate - Registering Custom Animations by Christopher Wallis (@notoriousb1t) on CodePen.

Creating Complex Effects

Because I can pass Just.animate() multiple elements at once, I can create complex effects by animating several elements at once. Here is a CodePen that shows some of the things you can do pretty easily.

See the Pen Just Animate - Animating Multiple Elements by Christopher Wallis (@notoriousb1t) on CodePen.

Animating in Sequence

I can animate a sequence of events using Just Animate by providing an animation for each step of the sequence. Here is what the api looks like:

var player = Just.animateSequence({  
    autoplay: true,      // starts automatically
    steps: [{            // animations to play
         el: '.targets', // elements to animate
         name: 'zoomIn'  // animation to play
    }]
});

Each animation plays completely before calling the next animation. I can play, pause, reverse, etc. the same way I can on a single animation. The sequence animator works great for introducing elements one at a time.

Here is a CodePen I forked and changed to introduce each letter at a time:

See the Pen Looney - Animated! by Christopher Wallis (@notoriousb1t) on CodePen.


Traveling Through Time

Just Animate has a timeline feature that I can use to travel forward and backward through a series of animation events. I use timelines instead of sequences when more than one animation has to play at the same time. Timelines are more powerful than sequences at the cost of understandability. Here is what the code should generally look like for a timeline:

var player = Just.animateTimeline({  
  autoplay: true,     // start automatically
  duration: 5000,     // length of timeline
  events: [{
    offset: 0,        // starting position relative to total duration
    el: '.class-name',// elements to animate
    keyframes: [],    // keyframes in animation
    timings: { }      // animation timing
  }]
});

I also put together a sailboat race on CodePen to show the usage. Unfortunately, sometimes there is some jank on timelines. I need help on this. Getting the timeline to work forward, backward, and pause was dizzying. The code for that portion begs to be refactored.

See the Pen Boat Racing with JustAnimate! by Christopher Wallis (@notoriousb1t) on CodePen.

Outro

If you want to checkout Just Animate, go to the GitHub Project or fork one of the above CodePens.

If you want to help but can't spend the time, share this on social media or star the GitHub repo to get the word out. I would appreciate any suggestions or contributions!