Comments (7)
(Not sure on the etiquette of commenting on closed issues, sorry!)
Awesome! I don't see the value being an array to be an issue. If I'm not mistake, the current behaviour is that if you pass a value, it will animate from its current value to
that new value? And if you pass a (2 element) array it will interpolate from the first to the last? So, I think it will still be the same logic.
It might even be possible to simply flatten the object in some way, where each element in the array becomes a new property but with altered delays.
That would allow you to use the same logic for total animation duration, playing, etc.
Would you accept a PR for this or would you rather take a look at it yourself once it's a priority?
from anime.
Yes this is definitively something that can be useful.
I'm not sure how it will fits in the current API, because the value
property can also accept an array.
This is something I'll consider 👍
from anime.
I like the idea, a PR is welcome!
from anime.
An attempt to get multiple keys values in one property: https://github.com/juliangarnier/anime/tree/multiple-keys-per-property-j
But it's really messy, and fails in a lot of cases.
The biggest problem here is the order in which the tweens are played to avoid overlap (e.g. two translateX values, or the last CSS value overriding the previous one).
I think the tween creation part must be rewritten to accept multiple values as the default.
And have a proper way to play them in the main loop, without having to look at what should be played first.
You can PR here: https://github.com/juliangarnier/anime/tree/multiple-keys-per-property
from anime.
Just to let you know, V2 is almost here, and add multiple keyframes by properties following the syntax described in this issue.
Examples here : http://anime-js.com/v2/documentation/#keyframesChain
The documentation is still WIP, and I didn't have the time to write a proper change log yet, but the code is available for testing here : https://github.com/juliangarnier/anime/blob/v2.0/anime.js
Feedback is welcome :)
from anime.
And relative to this, I also added a timeline system, that allows proper synching between multiple anime instances : http://anime-js.com/v2/documentation/#multiple
from anime.
Added to V2.
from anime.
Related Issues (20)
- Unable to use anime.js with node and express HOT 11
- Feature: ability to set innerHTML beyond numeric values HOT 1
- Spider-weeb app
- Bug report: spring-based motion not completing (Vanilla JS, HTML, CSS) HOT 4
- How to run animation on same element but with different text ? HOT 3
- can you run a for each loop in the targets? or refresh where the target is pointing to with the loopComplete callback?
- Just a question about line drawing in the docs HOT 2
- Why a cant use play/pause buttons? HOT 1
- Why cant I connect anime? HOT 1
- Does anime have a feature that can be used to implement horizontal scrolling? HOT 1
- anime.seek(0) not working HOT 3
- Anime V4 HOT 2
- Duration property problem when I use an event
- animejs morph is broken for more then 1 object HOT 1
- Refusal for Execution HOT 4
- Timeline does not draw all paths (stoke dash effect) HOT 1
- There are non-trivial differences between anime.js and anime.min.js. HOT 1
- Possible problem with SVG and transform-box HOT 3
- Ability to run it server-side
- Error: Path attribute d: Unexpected end of attribute. Expected Number
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from anime.