Comments (4)
You can already do some things like: http://jsfiddle.net/GMXuF/14/
from moofx.
Also what is your main goal, I mean, you can have bezier curves with n points, and you could write a solver for that (as described on http://en.wikipedia.org/wiki/B%C3%A9zier_curve for example). But then you must realize you can't easily translate that to the CSS3 timing function trick I used in the above jsfiddle, and you'll have to use the fx class (the JS-animate-anything 'fallback').
from moofx.
Didn't actually thought about using a custom equation, thanks for pointing it out Arian!
Generally the perfect scenario would be to set up a few x/y points in relation to the original position of the element, a bezier would automatically specify the animation path between each point. Now my math skills suck, so I was kind of hoping having a bezier method would be something that'd be interesting to more people than just me.
Edit: not that familiar with the terminology, so just googled a bit and what I describe above is a cubic/poly
from moofx.
You can use the base fx class for any non-dom related animations, or to have a completely custom animation.
Just require("moofx/lib/fx") or pass a function to moofx() rather than an element (i call this a renderer). This way you will get the base animation framework which is completely disconnected from css stuff. You can still use cubic beziers, or custom functions for equations.
An example would be:
moofx(function(now){someElement.style.left = now + 'px'}).start(0, 100, {equation: Penner.Equations.BounceBackWhatevs});
from moofx.
Related Issues (13)
- Animating `border-radius` clears the initial radius HOT 1
- Integer duration option issue. Is README.md outdated? HOT 1
- Firefox 3.6 - Exception... "Not enough arguments" HOT 1
- Stop animation HOT 2
- getters.border returns null
- resetCSS errors when element isn't in the DOM
- Uncaught TypeError: Cannot read property 'camelize' of null HOT 8
- Generated file is indicating two different versions HOT 1
- Ability to transform translate3d, scale3d, rotate3d HOT 2
- Chrome 26 (currently beta) breaks moofx HOT 2
- Error with distribute HOT 8
- forEach is not a function HOT 5
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 moofx.