Code Monkey home page Code Monkey logo

anime's Introduction

Important

🎉 Anime.js V4 is now available in early access 🎉

After years in the making, Anime.js V4 is finally available in early access for my GitHub Sponsors!


anime.js

JavaScript animation engine | animejs.com

npm version npm downloads

Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API.
It works with CSS properties, SVG, DOM attributes and JavaScript Objects.

Getting started | Documentation | Demos and examples | Browser support

Getting started

Download

Via npm

$ npm install animejs --save

or manual download.

Usage

ES6 modules

import anime from 'animejs/lib/anime.es.js';

CommonJS

const anime = require('animejs');

File include

Link anime.min.js in your HTML :

<script src="anime.min.js"></script>

Hello world

anime({
  targets: 'div',
  translateX: 250,
  rotate: '1turn',
  backgroundColor: '#FFF',
  duration: 800
});

Browser support

Chrome Safari IE / Edge Firefox Opera
24+ 8+ 11+ 32+ 15+

anime-js-v3-logo

Website | Documentation | Demos and examples | MIT License | © 2019 Julian Garnier.

anime's People

Contributors

a-babin avatar codekonami avatar darkace65 avatar datnordstrom avatar fljot avatar g1eny0ung avatar hogewest avatar juliangarnier avatar kn0wn avatar leocardoso94 avatar lordnox avatar lukeed avatar maximilianos avatar mbrandau avatar ngryman avatar okikio avatar petero-dk avatar pjoy avatar pkage avatar rileygowan avatar ryanpwaldon avatar sebermann avatar sneakyness avatar srikarg avatar styfle avatar tbranyen avatar tsympil avatar willowcheng avatar willwashington avatar yurifa avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

anime's Issues

Hover-Effect

Hi,

I'm trying to achieve a hover animation with Anime.js but this doesn't seem to work as intended. I've defined an animation with direction alternate and I'm trying to apply it to a hover function - at least this is how I thought it should work. but the animation seems to trigger multiple times, making the effect useless.

I've made a Codepen here: http://codepen.io/juergengenser/pen/XKzoQO

anything I'm doing wrong here?

thanks,
Jürgen

Possibility of allowing custom cubic-bezier curves

Any chance you'd be willing to allow that? I had a look around and combined a few things into a codepen.
http://codepen.io/hotmilo23/pen/KMWXOQ?

Not sure which solution is giving the right answer, the slower one matches what I see in after effects.

If you didnt want it in anime itself, maybe just allow the use to pass in an easing function?

anime({
  targets: 'div',
  rotate: {
    value: 180,
    duration: 1500,
    easing: function(t) {
        return ...;
    }
  },
  direction: 'alternate',
  loop: true
});

Either way, we are looking at using this for a major project coming and would be happy to make PRs if you're willing.

Cheers

use Transalte3d Hack

This project has been using will-change property for GPU Optimization.
But many browsers doesn't support it.
So, why don't you provide translate3d hack workaround?
If you don't like that tricky way, it could be offered an option. like this.

anime({
    useTranslate3d: true
});

Possibility of allowing multiple transform keyframes per property

Instead of just a to and from for each property, would you consider allowing multiple 'keyframes' in an animation?

Something like this perhaps

anime({
  targets: 'div',
  translateX: '13rem',
  rotate: [{
      value: 90,
      duration: 750,
      easing: 'easeInOutQuad'
    }, {
      value: 180,
      duration: 750,
      easing: 'easeInOutBounce'
    }
  ],
  scale: {
    value: 2,
    delay: 150,
    duration: 850,
    easing: 'easeInOutExpo',
  },
  direction: 'alternate',
  loop: true
});

So each part of the rotate array would happen in sequence. This just allows more complex animation curves to be created.
Keen to make a PR if you are interested.

Cheers

What about JS Objects?

I want to ANIMATE JS OBJECTS like this:
from {br: 1, brr: 2}
to {br: 1000, brr: 10034}
Is there any way? I can't find it in README

Opacity support for function(el, index) ?

Hi,
I need one of my elements in an animation to keep its original opacity while others are changing.
Maybe i missed something, but it doesn't seam possible to have something like this :

opacity: function(el, index) {
    return index < 2 ? { value: 0, duration : 1000} : false;
}

Enhancement: Timeline

Hey Julian, good work you did right there. I was curious if your vision of anime includes some kind of a chaining functionality, eg.:

anime.chain({autoplay: true}, [anime({
  targets: '.first',
  translateX: '13.5rem'
}), anime({
  targets: '.second',
  translateX: '13.5rem'
}), anime({
  targets: '.third',
  translateX: '13.5rem'
})]);

or maybe

const chain = anime.chain({autoplay: false});
chain.add(anime({
  targets: '.first',
  translateX: '13.5rem'
}));
chain.add(anime({
  targets: '.second',
  translateX: '13.5rem'
}));
chain.add(anime({
  targets: '.third',
  translateX: '13.5rem'
}));
chain.play();

The tricky part is probably nailing the delays and such. Greensock does that par excellence, but it's obviously bulky and I think that's definitely something you want to avoid.

Q: motion path with random offsets

Is there a possibility to add some randomness to the motion path movement? Obviously it is not as easy as in the random examples? Thanks for any help.

Targets $(this.element).find('.xxx') not working

Hey. I try to use anime instead of gsap but it doesn't work with my Target selector.
Any Idea whats wrong here or is this not supported?

// Dependencies
import $ from 'jquery'
import TweenMax from '../../../../node_modules/gsap/src/uncompressed/TweenMax'
import anime from 'animejs'
import waypoint from './vendor/jquery.waypoints'
import debounce             from './debounce'


// Find Blocks with .sm Element
var sm_blog_triggers = $('.js_waypointTrigger').has('.js_waypointElement');


// Waypoint Init
var waypoints = $(sm_blog_triggers).waypoint({
  handler: function(direction) {

    // debugging
    // console.log(direction, this.element);

    // Check if direction down
    if ( direction === 'down') {

      // Fade In Up Settings
      // TweenMax.staggerTo($(this.element).find('.js_waypointElement'), .5, {
      //  …
      // }, 0.15);

      anime({
        //targets: '.js_waypointElement',
        targets: $(this.element).find('.js_waypointElement'),
        translateX: '0',
        translateY: '0',
        opacity: 1,
        delay: function(el, index) {
          return index * 80;
        },
      })



    }
  },
  offset: '90%'
})
``
`

Thanks for help!

Generating SVG word paths

I looked online for resources on generating SVG paths via words (love the anime.JS logo animation).

How did you go about generating this SVG? illustrator?

the opacity and scale bug

1/ the opacity changing time is different from the duration whitch I set
2/ in the begin I uses css set transform:scale(0),then I use anime to scale my target to 2,but when the anime inited,it will change scale to 1
my English is not good .promise you can understant. thank you.

Change speed during animation

Is it possible to change the speed of the animation while it's already playing without having to remove the animation and re-animate the item with a different duration? Playing with anime.speed setting only applies this to new animations and not currently playing ones.

Starting an animation at a seek point?

Is it possible to start an animation at a certain seek point? I was thinking I could use the .seek() method for this, but I tried it on a motion path animation and it didn't seem to work. I'm not sure if this is the right way to approach it.

What I'm trying to do is stagger elements being animated along the same motion path. I initially tried to use delay to stagger, but that caused them to show at the first point, wait, and then animate.

Stop and resume translate animation

Don't think this is a specific issue with the library (awesome so far by the way) but the way I'm using it but I'm not sure where to get support.

What am I trying to do?
I want to animate (translateX) some .items from right to left and be able to stop the animation on hover and resume it again when the mouse is no longer hovering.

What is the issue?
I have managed to get the basic animation I want as well as pause by calling anime.remove('.item'); on hover but it's the resume I cannot manage to work properly. When the resume occurs (I look through each .item element and add another animation to it) they slow down and move at different speeds and the items start overlapping.

I maybe could of used the play() and pause() functions but I had a little trouble pausing animations by looping through the anime.list. Not all .item elements would pause and then calling play() function on each element didn't resume it.

Here is what I have so far: http://codepen.io/Safinn/pen/qNpdAO?editors=1010

So I need to be able to get the .item elements to resume at the same speed (no overlapping). Any ideas? Thanks for the help.

Made with Anime.js

Hey, just wanted to say thank you for creating animejs! Because of your work we were able to make animations in react simpler and easier with react-anime than they used to be. Making our lives wayy easier because of your animation engine.

Not working on Codepen.io

When I downloaded the framework and began to experiment with the functions and API, I was unable to modify the div I created, even though I used the correct syntax. I attempted to call the script through this pen: http://codepen.io/juliangarnier/pen/4032af61ca0478304ab7b31b70a44804. Unfortunately, while CodePen recognized the syntax, it would not execute the animation.

<script src="anime.min.js"></script>
<div class="waden"></div>

.waden {
height: 200px;
width: 200px;
background: #000000
}

var myAnimation = anime({
target: '.waden',
translateX: '16px',
rotate: 360,
borderRadius: '8px',
duration: 2000,
loop: true,
`

SVG path animation example

First of all, great library, thanks for the awesome work! :)

I'm having a problem with animating SVG paths in one of our demos:
http://tympanus.net/Development/ItemRevealer/

Do you have any code example with SVG path animations? I'm trying to find out what's wrong with the demo code but it looks like Chrome (53.0.2785.89 (64-bit) on Mac) simply does not animate the SVG paths.

Pass node as a target.

Hi, thank you for your work. I have a question, would it be possible to add support for DOM nodes as targets?

Grouping all animations into one single RAF

Right now every anime instance will create a new RAF.
I started doing some performance test with a single RAF, and the results are really good (up to 20/30% faster when a lot of animation are running simultaneously).
You can test it here https://github.com/juliangarnier/anime/tree/single-RAF.

My only concern is the use of performance.now(), not sure if it's still too early to use http://caniuse.com/#feat=high-resolution-time.

Some tests:
Old:
http://codepen.io/juliangarnier/full/545d66779d81ee68062bc8db018f6ee1/

New with a single RAF:
http://codepen.io/juliangarnier/full/f56c939864ea6b1b6efa8726e7ea8119/

Feedbacks are welcome.

Converting circular structure to JSON

Hello,

I'm working on a react component that wraps anime, and creates great animations. We finished it up and know our code works since we made a demo using it on codepen. However when we create our library UMD build with webpack and import our package over to recreate the animation for our github-pages site we get an error in the console saying the following:

anime.js:150 Uncaught TypeError: Converting circular structure to JSON

The full trace is this:
screen shot 2016-09-08 at 12 17 50 pm

when we build our package we set anime.js as a peer dependency. So that we don't bundle anime with react-anime. You have to npm install animejs and react-anime together. So when we get this circular dependency error we're not sure why its happening. Our code is up on github if you would like to take a look

Importance of sequence of anime's argument attributes

I have found something in the library that is not mentioned in the documentation, and I think is somehow important:
The sequence of anime's argument attributes affects animation, that is, for example, if you use scale property before translate property, you may get different result than if use translateX before scale property. Live comparison here:
1. scale before translate
2. scale after translate
However this is not a bug related to this library, but I recommend this tip to be mentioned.

Allow easing to accept function(el, index, total)

In order to create the animation I'm going for using a single anime call (and the goodness that comes with that in regards to playback controls simplicity), I need to use different easing functions for different objects.

I'd like this to be possible:

var myAnimation = anime({
  targets: ['.blue', '.green'],
  translateX: '13rem',
  rotate: 180,
  easing: function (el, index) {
    return index === 0 ? 'linear' : 'easeOutElastic';
  },
  borderRadius: '8px',
  duration: 2000,
  loop: true
});

synchronous start

If I add a new element to the document and want to play an animation with opacity: [0, 1] it will flicker because we will see the element with opacity 1 (the default) during one frame.

Could the start of an animation be synchronous when autoplay is true ? This way the element would immediately be set to opacity = ~0

Possibility to set a property

Hi thanks for Anime.js!

This is more of a question than a issue.

But I was wondering if you could set a property to alter the animation.

For example:
``
var openMenu = anime({
targets: ['.menu'],
translateX: '20rem',
duration: 1000,
autoplay: false,
direction: 'normal',
complete: function() {
console.log( this.translateX ); // logs 20rem
}
});

$(document).on('click', '.hamburger', function() {
openMenu.translateX = '40rem'; // set obj property
console.log( openMenu ); // checks out with new set value
openMenu.play();
});
``

Should this be possible? Or.. :)

thanks!

Animations choppy when interacting with images?

I'm not sure if I'm missing something inherent here, but I noticed when I run an animation and it's either:

a) On an element overtop an image that's loading, or;
b) On an element that contains an image

the animation ends up becoming choppy as hell, until the page loads more. Seems to be if I use traditional css3 animations/transitions and even jquery's $.animate() this doesn't happen so I don't understand how using anime is causing this issue. Am I doing something wrong here?

animation radius not working IE & firefox

when we create our anime obj for example :

anime({
  targets: 'div',
  width: '70%', 
   borderRadius: 8,
  duration: 3000,
  loop:false 
});

the animation will stay not curved with Firefix & IE +10 , borderRadius works 100% with chrome

React Integration

What would be the best strategy to integrate anime, into react? I really want to use anime however I'm not sure about what the best strategy to do this. Any feedback would be helpful.

Animating svg `x`

Hey there.

Is there a way to animate the x/y attributes on svg rects/patterns? I tinkered with it for a bit but I only managed to add style="x: ... " which wasn't working.

Shake / Wiggle / Vibrate

Update: I got most of the way: http://codepen.io/stevenchu/pen/KrXyZW
(this codepen above i nested all the other var functions. i know i could have kept them separate, but i wanted to try it and it worked out nicely)
Need help to restart the entire loop!

How?
I tried experimenting and modifying the callbacks.html demo example to give one of the animations a fixed number of loops, but have not been able to get the original loop to replay.


Novice in need of help! I want to achieve a suspended explosion effect that comes to a halt and reverses itself like a vacuum (the type you might see with star wars / star trek / matrix)

I'm attempting to create this action sequence by:

  1. boxes rumbling shake with a realistic easing
  2. boxes explode.. translateX translateY with an easing that feels like you're catching explosion midmotion (i used the random target values demo as my base..)
  3. boxes reverse back to starting position , and have this repeat on a loop

Pen1: I have the rumble going into explosion here:
http://codepen.io/stevenchu/pen/akLpNE
Pen2: And I have the isolated suspended motion on an easing loop here:
http://codepen.io/stevenchu/pen/VjrPyg

but I'm not really sure how to put the two together! I would love to play it in reverse from here.

As an alternative, Pen3: I got it to rumble > explode swing motion which returns back to beginning > 2nd rumble doesn't really work though > how to loop back to beginning and play again on loop?:
http://codepen.io/stevenchu/pen/WxkRKo

General Pen1 Issues:
*could the shaking start out slow then increase?
*I'm having trouble getting the explosion (translateX/rotate/scale from the random target values demo) to play the easing as well as follow the duration?

Thank you!!

Scaling SVG is now blurry in Chrome.

As of today, all of my SVG elements that I'm scaling with Anime are showing up blurry during the animation in Chrome. See below:

what

Why is this happening all of a sudden?

Promise support

Would it be out-of-scope to provide a Promise for animation completion? Something like Web Animations finished Promise:

var myAnimation = anime({
  targets: ['.blue', '.green'],
  translateX: '13rem',
  rotate: 180,
  borderRadius: 8,
  duration: 2000,
  loop: true
});

myAnimation.finished.then(() => {
  /* ... */
});

anime transform overriding the elements existing transform

button {

z-index: 387;
width: 133px;
border-width: 0px;
-webkit-transform: matrix(0,-1,1,0,-2,135);
-ms-transform: matrix(0,-1,1,0,-2,135);
transform: matrix(0,-1,1,0,-2,135);
margin-bottom: -2px;
position: relative;
margin-right: -10000px;
margin-top: -2px;
left: 307px;
background: transparent url(../images/thumb3.jpg?crc=39550032) no-repeat center center;
background-size: cover;

}
"button" already have a transform-matrix. Now if I apply translateX animation
var anim = anime({
targets: button,
translateX: 200,
duration: config.transition_time,
delay: function(el, i) {
return i * 1;
},
easing: config.ease + 'Sine',
update : onUpdate,
complete : onComplete
});

Now button's transform matrix is overridden, however I want bot the transforms to merge/exist together

Support for queue

Really like it because is lightweight and would be great to support queue.

In addition, transition does not continue were it was if you fire animation twice, but resets?

Library independence.

Currently anime.js creates it's own animation loop with requestAnimationFrame, which makes it undesirable to add anime.js to an existing project that has it's own loop in which it produces it's own time stamps.

For example, suppose we have a game that makes it's own loop (with requestAnimationFrame, or something else in some other JS engine...). In order for anime.js to be integrated into that custom loop, it would be nice for anime.js API to accept a timestamp that was created outside of anime.js.

For a real-world example of an API that is independent in this fashion and can be placed into any existing animation/game loop, see Tween.js. Note in particular the .update() method of the Tween class.


But! it would also be nice if the anime.js API was able use requestAnimationFrame in cases where the developer doesn't already have their own loop. That's something both anime.js and tween.js don't do yet, which would be nice (having both forms of API for both crowds somehow)!

Problem when no values unit is specified on Safari

I have a div with those styles:

position: absolute;
font-weight: normal;
line-height: 1.2;
text-align: center;
transition: opacity 0.4s ease;
z-index: 1;

Then I want to animate this element.

 anime({
    targets: this.$els.tooltip,
    left: 116,
    duration: 500
});

I found that it is not working on safari, then I put some console in the anime.js, for example, in setAnimationProgress function,

var id = animatable.id;
console.log(progress);
switch (tween.type) {
// ...

The output is like this in safari:

screen shot 2016-06-30 at 3 07 22 pm

The output in Chrome is:
screen shot 2016-06-30 at 3 08 35 pm

Solution I found, change left: 116 to left: '116px'.

It's con't working with scale sometimes.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="dynamics.js"></script>
<script src="anime.js"></script>
<style>
div{
width:200px;
height:200px;
margin-top:20px;
margin-left:30px;
background-color:#afa;
transform:scale(0.1);
}
</style>
</head>
<body>

<div id="test1"></div>
<div id="test2"></div>

<script>
anime({
targets:'#test1',
scale:1,
duration: 5000
});

var test2 = document.getElementById('test2')
dynamics.animate(test2,{
scale:1,
duration: 5000
})
</script>
</body>
</html>
It con't work ,But dynamics can do! please help me (•ㅂ•)/♥

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.