juliangarnier / anime Goto Github PK
View Code? Open in Web Editor NEWJavaScript animation engine
Home Page: https://animejs.com
License: MIT License
JavaScript animation engine
Home Page: https://animejs.com
License: MIT License
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.
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.
I'm currently testing 1.1, and plan to release it really soon.
The biggest changes are the unified request animation frame loop, and pre-safari 9 transform prefixes.
You can test it here: https://github.com/juliangarnier/anime/tree/v1.1
Feedbacks are welcome.
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.
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.
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;
}
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
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
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.
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.
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
Is it production ready?
Do you have an eta for 1.0?
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.
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
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?
I was looking to examples on Codepen and found out that borderRadius
property is not working in Firefox. But working fine in Chrome. Codepen Link
Firefox version: 47
<!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 (•ㅂ•)/♥
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)!
Can we turn off elasticity? I have it set to 0 and I still see it happening on 'linear' animations...
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
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
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.
like an onEnd
callback or end
event ?
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:
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!!
Hi! Faced with the problem of implementation of the toggle:
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!
I con't use fontSize
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
});
Thank you!
Hi,
I'm getting a weird flashing issue.
Video here - http://quick.as/BW9OsDO8L
anime({ targets: document.querySelector('.fp-section__bg--' + page), opacity: 1, elasticity: 0, easing: 'linear' });
Thanks,
Tom
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.
Hi, thank you for your work. I have a question, would it be possible to add support for DOM nodes as targets?
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,
`
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
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:
Solution I found, change left: 116
to left: '116px'
.
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
});
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(() => {
/* ... */
});
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.
complete function con't execute in angularJS'directive
Is there any way to set origin
of the scale
? If there isn't, is it intended to add such a feature to this library?
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!
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.
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?
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
How can use this plugin in angularJS?
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?
I'm trying with:
anime({
targets: element,
opacity:0,
duration: 0
})
But it's not working.
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.
When interpolating a color value, the output of the RGB often goes negative, resulting in invalid values.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.