Making Animation Simple

Overview

Just Animate 2

Making Animation Simple

npm version Build Status Downloads

Main Features

  • Animate a group of things as easily as a single thing
  • Staggering and delays
  • Chainable sequencing
  • Full timeline control (reverse, pause, cancel, playbackRate, and seek)
  • Extendable timeline designed to make it simple to use multiple animation engines
  • Built-in tween engine that works with CSS Variables and regular objects alike
  • Plugin for Web Animation API
  • Alternate and repeat a complex series of animations (yo-yo)

This project is powered by your stars so ^ star it please.

Getting Started

Need help or have ideas?

Join the #just-animate channel on the Animation at Work slack, tweet @notoriousb1t on Twitter, or create an issue on GitHub.

License

Just Animate is licensed under the MIT license. (http://opensource.org/licenses/MIT)

How can I contribute?

  • Make awesome things with Just Animate and send me the link!
  • Create an issue or PR on GitHub
  • Help with this documentation and code examples
Comments
  • Rotation about center of element

    Rotation about center of element

    I want to rotate around the center of an svg element. So when I say rotate: 30, I want it to rotate around the center of the svg element instead of around the container. How would I accomplish this? There is another animation library out there that allows thisas default http://thednp.github.io/kute.js/svg.html, but I want to use solely this one. Thanks.

    question 
    opened by TimeTravel-1 4
  • Stagger on Interpolation

    Stagger on Interpolation

    Hello,

    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');
    
    question 
    opened by nunospot 3
  • [question] is WAAPI required?

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

    opened by t47io 3
  • Add

    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.

    enhancement 
    opened by notoriousb1t 3
  • Could you provide the minified file?

    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!

    https://github.com/cdnjs/cdnjs/issues/8336 https://github.com/cdnjs/cdnjs/pull/8344

    opened by kennynaoh 3
  • Add sequence function to support chaining together multiple animations

    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));
    
    enhancement 
    opened by notoriousb1t 3
  • Using in Web Components (animating inside Shadow DOM)

    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?

    update docs 
    opened by bitjson 2
  • Add range notation (

    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') }
        }
    })
    
    enhancement 
    opened by notoriousb1t 2
  • Add create hook

    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>'
        }
      }
    /* ... */
    });
    
    enhancement PRs welcome 
    opened by notoriousb1t 2
  • Revisit and modify API

    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

    • [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
            }
        ]
    });
    
    opened by notoriousb1t 2
  • Add NativeScript support

    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';
    enhancement PRs welcome 
    opened by notoriousb1t 2
  • Website link doesnt work

    Website link doesnt work

    On https://just-animate.github.io/api/ the link called "See Property Options" leads to https://just-animate.github.io/getting-started/property-options.md which gives 404

    opened by maximilianMairinger 0
  • circular dependency

    circular dependency

    (!) Circular dependency: node_modules/just-animate/lib.es2015/lib/store.js -> node_modules/just-animate/lib.es2015/lib/reducers/index.js -> node_modules/just-animate/lib.es2015/lib/reducers/cancel.js -> node_modules/just-animate/lib.es2015/lib/core/timeloop.js -> node_modules/just-animate/lib.es2015/lib/store.js
    (!) Circular dependency: node_modules/just-curves/lib.es2015/internal/index.js -> node_modules/just-curves/lib.es2015/internal/cssFunction.js -> node_modules/just-curves/lib.es2015/internal/cubicBezier.js -> node_modules/just-curves/lib.es2015/internal/index.js
    (!) Circular dependency: node_modules/just-curves/lib.es2015/curves/index.js -> node_modules/just-curves/lib.es2015/curves/easeInBounce.js -> node_modules/just-curves/lib.es2015/curves/index.js
    (!) Circular dependency: node_modules/just-curves/lib.es2015/curves/index.js -> node_modules/just-curves/lib.es2015/curves/easeInOutBounce.js -> node_modules/just-curves/lib.es2015/curves/index.js
    
    opened by gaou-piou 1
Releases(v2.6.2)
  • v2.6.2(Mar 26, 2019)

    This should provide the proper behavior when using props: {} to animate an svg element. Listing the elements as readonly svg props changes the setter behavior to use setAttribute. This is the same strategy used with viewBox.

    Source code(tar.gz)
    Source code(zip)
  • v2.6.0(Mar 9, 2019)

  • 1.0.1(Oct 25, 2016)

  • 0.6.2(Jul 19, 2016)

    Before starting on 1.0.0, I went through and added unit tests for all helper methods and improved the structure of the project so it would be simpler.

    Source code(tar.gz)
    Source code(zip)
  • 0.6.1(Jul 7, 2016)

  • 0.6.0(Jun 20, 2016)

    In previous versions, any css property used in the animation needed a starting and ending value. Now when JustAnimate processes keyframes, it uses the first value for a given property as the starting value and the last value for a given property as the end value. For instance:

    const keyframes = [
       { color: 'red' },
       { opacity: 0 },
       { color: 'blue' },
       { opacity: 1 }
    ];
    
    const timings = {
       duration: 2000
    };
    
    Just.animate(keyframes, '#target', timings);
    

    In the example, the initial color will be red, and the final color will be blue.
    The initial opacity will be 0, and the final value will be 1.

    Source code(tar.gz)
    Source code(zip)
  • 0.5.0(Jun 6, 2016)

  • 0.4.4(May 8, 2016)

    Added Angular2 and SystemJS support. To install for these environments, run this command at the top level of your project on a command line

    npm install just-animate --save
    

    Then when the application is being bootstrapped, inject your animation pack:

    import { JustAnimate, animations } from 'just-animate';
    
    JustAnimate.inject(animations.ANIMATE_CSS);
    

    To animate, call animate on an instance of JustAnimate

    import { JustAnimate, animations } from 'just-animate';
    
    var just = new JustAnimate();
    just.animate('fadeIn', '#animate-me');
    
    Source code(tar.gz)
    Source code(zip)
  • 0.4.0(May 6, 2016)

    updated api to work better with angular2

    • moved to rollup from webpack
    • moved to npm scripts from gulp
    • split just-animate.js into two files (core, animations) for browsers so users can opt into using the Animate.css animations
    • refactored interfaces into a definitely typed file
    • updated browser version (core) to have an inject method to allow angular2 to inject the animations into the Animation Manager prior to being instantiated
    • updated demos
    Source code(tar.gz)
    Source code(zip)
  • 0.3.0(Mar 24, 2016)

    • Initial Timeline animator is implemented!
    • CurrentTime and duration are not available for all animators
    • ElementAnimator properly stays at the end of animation on finish
    Source code(tar.gz)
    Source code(zip)
  • v0.1.0-alpha(Mar 11, 2016)

    • Changed .sequence() to .animateSequence() to make the name more descriptive
    • Changed the signature of .animateSequence to include steps and autoplay instead of being an array. This will allow for more options in the future
    • Added additional comments
    • Added interface for .animateSheet for future versions
    Source code(tar.gz)
    Source code(zip)
  • v0.0.0-alpha(Mar 5, 2016)

    This version provides the initial core of JustAnimate. The following high level features are included in this release:

    • Basic Web Animations
    • The ability to play, pause, cancel, reverse, or finish an animation
    • The ability to play animations in sequence
    • The ability to play, pause, cancel, reverse, or finish a sequence
    • Angular 1.x support as a Service
    • Prebuilt animations based on Animate.css
    Source code(tar.gz)
    Source code(zip)
JavaScript animation engine

anime.js JavaScript animation engine | animejs.com Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful AP

Julian Garnier 44k Dec 30, 2022
Accelerated JavaScript animation.

Velocity beta NPM: npm install velocity-animate@beta Docs https://github.com/julianshapiro/velocity/wiki IMPORTANT: The velocityjs.org documentation r

Julian Shapiro 17.2k Jan 5, 2023
GreenSock's GSAP JavaScript animation library (including Draggable).

GSAP (GreenSock Animation Platform) Professional-grade animation for the modern web GSAP is a robust JavaScript toolset that turns developers into ani

GreenSock 15.5k Jan 8, 2023
CSS3 backed JavaScript animation framework

Move.js CSS3 JavaScript animation framework. About Move.js is a small JavaScript library making CSS3 backed animation extremely simple and elegant. Be

Sloth 4.7k Dec 30, 2022
Animation library that mimics CSS keyframes when scrolling.

Why Motus ? Motus allows developers to create beatuful animations that simulate css keyframes and are applied when the user scrolls. Features Node & B

Alexandru Cambose 580 Dec 30, 2022
React particles animation background component

particles-bg React component for particles backgrounds This project refers to the source code of the Proton official website, I packaged it into a com

lindelof 561 Dec 24, 2022
🐿 Super easy and lightweight(<3kb) JavaScript animation library

Overview AniX - A super easy and lightweight javascript animation library. AniX is a lightweight and easy-to-use animation library with excellent perf

anonymous namespace 256 Sep 19, 2022
GreenSock's GSAP JavaScript animation library (including Draggable).

GSAP (GreenSock Animation Platform) Professional-grade animation for the modern web GSAP is a robust JavaScript toolset that turns developers into ani

GreenSock 15.4k Jan 5, 2023
Theatre.js is an animation library for high-fidelity motion graphics.

Theatre.js is an animation library for high-fidelity motion graphics. It is designed to help you express detailed animation, enabling you to create intricate movement, and convey nuance.

Aria 8.6k Jan 3, 2023
Pure CSS (no JavaScript) implementation of Android Material design "ripple" animation

Pure CSS (no JavaScript) implementation of Android Material design "ripple" animation

Mladen Plavsic 334 Dec 11, 2022
Animate Plus is a JavaScript animation library focusing on performance and authoring flexibility

Animate Plus Animate Plus is a JavaScript animation library focusing on performance and authoring flexibility. It aims to deliver a steady 60 FPS and

Benjamin De Cock 5.9k Jan 2, 2023
Create scroll-based animation without JavaScript

Trigger JS Create scroll-based animation without JavaScript. Sometimes we want to update the CSS style of an HTML element based on the scroll position

Trigger JS 1.1k Jan 4, 2023
A simple and easy jQuery plugin for CSS animated page transitions.

Animsition A simple and easy jQuery plugin for CSS animated page transitions. Demo & Installation http://git.blivesta.com/animsition/ Development Inst

Yasuyuki Enomoto 3.8k Dec 17, 2022
fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple

fullPage.js English | Español | Français | Pусский | 中文 | 한국어 Available for Vue, React and Angular. | 7Kb gziped | Created by @imac2 Demo online | Cod

Álvaro 34.3k Dec 30, 2022
Simple parallax scrolling effect inspired by Spotify.com implemented as a jQuery plugin

Parallax.js Simple parallax scrolling implemented as a jQuery plugin. http://pixelcog.com/parallax.js/ Please also check our v2.0.0-alpha! We'd be hap

PixelCog Inc. 3.5k Dec 21, 2022
Lightweight, simple to use jQuery plugin to animate SVG paths

jQuery DrawSVG This plugin uses the jQuery built-in animation engine to transition the stroke on every <path> inside the selected <svg> element, using

Leonardo Santos 762 Dec 20, 2022
simple JavaScript library to animate texts

Animated Texts Hi, this library is a simple javascript text animator Properties force type: number default: 300 start_delay_time type: number default:

Cristóvão 4 Jan 11, 2022
Making Animation Simple

Just Animate 2 Making Animation Simple Main Features Animate a group of things as easily as a single thing Staggering and delays Chainable sequencing

Just Animate 255 Dec 5, 2022
I made countdown birthday and fireworks animation using HTML Canvas, CSS, JS. The fireworks animation gonna come out once the countdown is finished or in other words, "Birthday Time".

Countdown-Birthday-Fireworks-Animation I made countdown birthday and fireworks animation using HTML Canvas, CSS, JS. The fireworks animation gonna com

Mahardika Bayu S.B 19 Dec 31, 2022
Animation Academy teaches you CSS animations using the transition and animation properties.

Animation Academy Open Animation Academy > Contents Background Built With Functionality Feature Highlights Wireframes Features In Development Backgrou

Jacob Benowitz 6 Jun 23, 2022