thednp / kute.js Goto Github PK
View Code? Open in Web Editor NEWKUTE.js is a JavaScript animation engine for modern browsers.
Home Page: http://thednp.github.io/kute.js
License: MIT License
KUTE.js is a JavaScript animation engine for modern browsers.
Home Page: http://thednp.github.io/kute.js
License: MIT License
Modern browsers don't seem to like setting scroll on each and every 16ms, so I am considering featuring a translate transition instead. An example here.
I've stumbled upon a certain set of missing points:
transformOrigin
property (I mistakenly though it's same with perspectiveOrigin
) but luckily the GURUs explain the diffsKUTE.Animate()
methodrequestAnimationFrame
polyfill dependency?Update
kute-css.js
plugin.allTo()
and .allFromTo
for collections of elementsoffset
to set a delay between animations of these collections of elements.Animate()
transformOrigin
tween settingclip
and backgroundPosition
propertiesboxShadow
pluginI'm attempting to create an morphing animation stepping through 3 shapes.
This seems to work fine with two paths but only runs once when 3 paths are provided. Is it possible to animate through three paths with this library using the fromTo()
method?
Platform:iPhone5s iOS 7.0 Safari
It seems to not support window.performance in this version. :(
repeat: 20 option allows you to run the animation of given tween multiple times. The default value is 0.
Doesn't talk about it, should I just set it to 999999999999
?
Hi, thank you for developing such a great plugin!
I'm having some trouble with changing the fill of the path when morphing from one path to another (using the svg plugin). Code I tried seems to match what you have on https://thednp.github.io/kute.js/assets/js/svg.js in terms of using attr: { fill: 'color' }, but the color isn't changing from the initial values used. I wondered if it was because I was using v1.6.2 on CodePen, so I changed it to v1.6.5, but that seemed to break the animation, so I'm now rather stuck. Please help if possible! :D
Would it be possible to add references to the Tween inside the callbacks?
E.G
if (this[options].complete) { this[options].complete.call(this); }
When i try animate height property of div in %, kute crush width error:
Uncaught TypeError: Cannot read property 'offsetWidth' of undefined
at Object.boxModel (VM917 kute.min.js:2)
at G (VM917 kute.min.js:2)
at new ht (VM917 kute.min.js:2)
at Object.vt [as fromTo] (VM917 kute.min.js:2)
at VM918 script.js:8
Reproduce here:
https://gist.run/?id=184c8fb470cf21933aba19a54c82d65c
There's alot of stuff stored in the Tween function's this
that are actually not needed in the scope of execution, and they take a huge chunk of memory. However, we do want to pass it to all string parsing functions.
UPDATE:
Tween
constructor is getting lighter, the tween objects created give alot more freedom to garbage collector DONETween
constructor and improve performance DONEperspective
as a transform object property as already formatted string DONE%
unit to px
via element.offsetWidth
DONE%
unit to px
via element.offsetWidth
/ element.offsetHeight
DONErad
to deg
via value * 180/Math.PI
DONEcrossCheck
object DONEthis
in all crossCheck
functions DONEthis
in all parseProperty
and prepareStart
functions DONEMore updates to come.
🚨 You need to enable Continuous Integration on all branches of this repository. 🚨
To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because we are using your CI build statuses to figure out when to notify you about breaking changes.
Since we did not receive a CI status on the greenkeeper/initial
branch, we assume that you still need to configure it.
If you have already set up a CI for this repository, you might need to check your configuration. Make sure it will run on all new branches. If you don’t want it to run on every branch, you can whitelist branches starting with greenkeeper/
.
We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.
Once you have installed CI on this repository, you’ll need to re-trigger Greenkeeper’s initial Pull Request. To do this, please delete the greenkeeper/initial
branch in this repository, and then remove and re-add this repository to the Greenkeeper integration’s white list on Github. You'll find this list on your repo or organiszation’s settings page, under Installed GitHub Apps.
Error when <script src="kute/dist/kute.min.js"></script>is placed in HEAD section of html file. When I place the code before BODY tag everything works fine
Main reasons:
Main downsize: UMD wrappers gonna go.
Hello,
as promised i took a look at kute.js and i find it very interesting indeed.
i'm trying to use kute.js but already run into some problems, which are certainly user related errors. :-)
1.) anonymous function calls
i tried something like complete:function(){..do something ..} ... but apparently you have to call a specific function by name .. am i right?
2.) complete event fires before real ending
i have the following tween and a function which should be called by completion. but the showText()-function ist called immediately.
var tweenSlide0 = KUTE.fromTo(
$target,
{left:0},
{left:-300},
{delay:3000},
{easing: 'easingCubicOut'},
{duration:10000},
{start:hideText(1)},
{complete:showText(1)}
)
.start();
function showText(num){
console.log("showText");
var tweenFadeIn2 = KUTE.fromTo($s_texte[num],{opacity:0}, {opacity:1},{duration:100}).start();
}
3.) specific order
sometimes duration is accepted as argument, sometimes not. it depends on the positioning inside the tweencall. in my second problem description you see a duration of 10000 (i wanted to see an effect) but no change in the tween duration happens. strange.
as mentioned above... the tweening engine seems pretty neat and as for the kb size very "sexy". i have to figure out only the best handling.
thanks
alex
Hi and thank you for this amazing plugin.
Although I didn't find an easy way to smoothly reverse back the shape to it's initial state. I only found a reverse function in extending the plugin example you provided and I was wondering why isn't it included by default?
Or is there a way to transform shape and get back to initial state after some time without using the yoyo and repeat options?
For example I want to trigger this thing just once after some time which might vary.
Hello again,
just a quick question. can i use kute to animate the polygon fill of a svg? i didn't find it in your documentation. so maybe you have an idea. :-)
thanks again
alex
Using CDN or Jsdelivr with latest chrome version gives an error at loading the script from remote server. However it works locally with Brackets with CDN & Jsdelivr.
Chrome Error :
Uncaught TypeError: Cannot read property 'style' of null
at v (kute.min.js:2)
at kute.min.js:2
at kute.min.js:2
at kute.min.js:2
Any idea ?
Thanks
I have a simple SVG with 2 paths.
One is simply hidden(CSS) as required to morph.
I run KUTE.to("#path1",{ path: "#path2" }).start();
and now obviously the visibility of the 2 paths has switched.
Now, how do I morph from path2 -> path1 (basically a reverse)?
I tried the obvious:
KUTE.to("#path2",{ path: "#path1" }).start();
and
KUTE.to("#path1",{ path: "#path1" }).start();
but they don't seem to work.
Here is a pen of the same: http://codepen.io/supernova13892/pen/mRjaLL
Hi,
I try to test this library for svg manipulations. After library and plugin loaded ->
<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.1/kute.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.1/kute-svg.min.js"></script>
I have this error in my console "Element not found or incorrect selector: path", this error happen only when the svg plugin is loaded.
Thanks for the help.
I am currently working on moving all little functions to prototype root, but I think it's not the cause.
I have to investigate.
thank you for this great library, the demo looks promising and very good alternative to GSAP, wonder what's the recommended way in kute.js to create animation that requires overlapping of tweens
(eg. from 0s to 5s, change width of object A from 20px to 100px, and from 2s to 4s, change color of Object A from red to blue)
If I try to import KUTE.js in my project...
import kute from 'kute.js';
import 'kute.js/kute-svg';
..., I'll get the following error in the console:
kute-svg.js:26 Uncaught TypeError: Cannot read property 'pp' of undefined
In this case, I was trying to bundle my JavaScript files with rollup
, but it doesn't seem to work with browserify
either.
The SVG plugin looks for KUTE.js on the window object, but this is not defined if KUTE.js is imported from an AMD or CommonJS context (UMD wrapper). So, how's this supposed to work in this case? I couldn't find any notes in the documentation.
Probably for 1.6.0 release.
Update: the utility is ready, please test here: http://codepen.io/thednp/pen/YGayLg
To implement a cycled animation a try to use complete hook, but it did not work:
https://jsfiddle.net/akiyamka/m775f3t1/1/
Hey friends,
Sorry if this is not the place for coding doubts or something, but I've wasted to many time already with this issue.
I've already jumped to the conclusion the problem is within the svg itself, they are not morphing.
What could it be the problem? The shapes are quite simple, all have the same size and anchors and, as you guys say on your documentation, "closed shapes (their d attribute ends with z)."
And it's very looks like greensock, but greensock need money
Kute.JS looks a lot like GSAP on the first 2 looks.
Is there anything unique about kute.js?
This question is by not meant offensive in any way. I am just curious.
Thanks!
Most JS libraries have the version in their header.
Found myself a bit confused as to what version I had actually downloaded.
Cool library btw, looking forward to using it.
hello,
is there animation complete event? or we have to use onUpdate along with isPlaying?
thanks
Nehal
Hi @thednp.
Working with kute.js is easy and works nice with my vdom-like lib and f7. I building large app and want small size with keeping parallel loading. But i have more than 3k dom nodes, so i want copy properties processing from worker for performance reason. Is this possible?
Below idea,
//app.foods.js
import processorList from '../tasks/processedList';
import render from '../rendering/tezRenderer';
const _listOfFoods = [
{ name: 'Pizza', cost: '20USD', deliverTime: 3600, nearestServiceProvider: 'street #n' },
...
//other 3k list
];
const scaleDown (item, i) => {
return KUTE.to(item, { scale: [1, 1] }, { duration: 2000 }).start();
}
const _processedList = processorList(_listOfFoods).map(render(scaleDown));
export _processedList;
//app.worker.js
const foods = importScripts('app.foods.js');
self.onmessage = function (e) {
const dt = e.data;
foods(dt); // something like this
}
//app.main.js
import _processedList from './app.foods';
import _worker from './app.worker';
_worker.postMessage({...});
Since we only need a way to measure the total length of a shape, it might be a good idea to extend the SVG plugin in that direction.
We're going full D3.js mode with everything about KUTE.js
UPDATE: added a new object with functions for interpolation. Makes slightly bigger core, but lighter plugins.
width: 25%
) - used in core and pluginsUPDATE: the interpolation functions work fine, improving performance by a small percent, the scroll animation shouldn't jump anymore and perhaps transforms can be improved as well.
UPDATE: some changes to the core, some functions went private for performance reasons
UPDATE: the files in the dist
folder will be minified with Google Closure, and it bumps performance by a small percent. Awesome.
Hello,
as i wanted to implement i newer version of your awsome tween-engine i encountered a problem. the scale property does not behave as before. it's not scaling and the positioning animation (translateX as well as translate:[x,y]) is really jerky.
That's my code and i left the minifill.min.js in my html.
KUTE.fromTo($ameisen,{translate:[20,50],opacity:.6,scale:1.3},{translate:[0,0],opacity:1,scale:1},{duration:3000}).start();
Any suggestions?
I feel we need something for SVG since CSS transform property doesn't work with SVG even on latest IE, I'm thinking of a new property svgTransform
to accept anything SVG can work with transforms.
The new property will process transforms this way:
var endValues = {
translate: [x, y]; //or just x
rotate: [angle, x, y], // where x and y represent the transform-origin
skewX: angle,
skewY: angle,
scale: v
};
Now since the SVG 2.0 draft is final and the presentation attribute for transform
is not deprecated, especially because it's cross-browser supported, we're gonna use it instead of CSS3 transform we already have in the core engine to keep performance tight.
Another advantage of using the presentation attribute is the fact that we don't have to deal with browser prefixes, at all. It just works.
Those being said, a possible tween object would look like this:
var tween = KUTE.fromTo('selector', {svgTransform: startValues}, {svgTransform: endValues}, {easing: 'linear'});
And the HTML would look like this
<svg viewbox="0 0 300 300">
<rect x='75' y='75' width='150' height='150' transform='translate(100 0) rotate(45 150,150) scale(2 1.5)' />
</svg>
UPDATE: the new plugin is almost ready to commit, currently testing and documenting.
UPDATE: working on a function to automatically adjust translation when scale is used.
UPDATE: the automatic adjustments for scale is working fine, but scale will only work with one value only instead of single/array.
And now it does.
Hi,
Is it possible to use kute on external svg file in HTML?
When pasting the SVG inline code, it works well, but when I add the object, crashes errors.
Uncaught TypeError: Element not found or incorrect selector: rectangle
at g (kute.min.js:2)
at Object.pt [as fromTo] (kute.min.js:2)
at motion.js:16
Hi.
As i know VelocityJS have in Wikipedia as animation library..
Would be nice if adding kute.js to Wikipedia.
There seems to be a dependency requirement issue In the plugin files in the Bower package.
The KUTE.js/kute-jquery.js file has the correct requirement of the kute.js file. However the other plugins us define(['kute.js'], factory);
and module.exports = factory(require('kute.js'));
In order for the files to compile correctly with Browserify, I have to change those to reference the kute.js file itself (notice the ./
): define(['./kute.js'], factory);
module.exports = factory(require('./kute.js'));
Is that a change that should be made in the plugin files or should I requiring KUTE in a different way?
Here's an example of my js file:
require( '../../node_modules/jquery/dist/jquery.js' ); require( '../vendor/KUTE.js/kute.js' ); require( '../vendor/KUTE.js/kute-jquery.js' );
Which works file. But when I add:
require( '../vendor/KUTE.js/kute-css.js' );
(or any of the other plugins files) I get an error: "Cannot find module 'kute.js'"
But when I changed the lines I mentioned above to use the file, they worked and were compiled correctly.
Just tried using KUTE for the first time and I get this error on page load. I haven't done anything yet except put script tags linking to the JS in my header.
kute.js:26 Uncaught TypeError: Cannot read property 'style' of null
K.property @ kute.js:26
(anonymous function) @ kute.js:43
(anonymous function) @ kute.js:12
(anonymous function) @ kute.js:14
I am thinking about moving them to the experiments repository and only keep the core easing functions.
The idea is to play around the opportunity to create an all-in-one bundle with the next big version 1.6.0.
Hi, good job with KUTE!
I'm trying to test many SVG libs for remaking my microsite: stevenspinoza.github.io.
I was chaining tweens for emulating the fire animation loop, but I see performance issues.
I have in the chaining,using 6 different svg's:
compliMorph1.chain(compliMorph2);
compliMorph2.chain(compliMorph3);
compliMorph3.chain(compliMorph4);
compliMorph4.chain(compliMorph5);
compliMorph5.chain(compliMorph6);
compliMorph6.chain(compliMorph1).start();
Do you think I can build this animation using KUTE or do you know other way (Canvas, other libs, etc)
Thanks.
After upgrading to React 16, we are seeing a great deal of these errors:
Affecting primarily Safari 9.1.3 with "kute.js": "1.6.5"
Appears to be throwing on kute.js line 686
this._startTime = t || time.now();
because time
is undefined.
time
is instantiated from window.performance
on line 17 with
// set a custom scope for KUTE.js
var g = typeof global !== 'undefined' ? global : window, time = g.performance,
Hi,
I've stuck with a weird issue with inability to perform a simple transform (probably it's the issue with my setup). I'm using webpack to make a build of my code.
The animation code itself is actually taken from this codepen: http://codepen.io/thednp/pen/YWbpJo
However, when I try to run it in my webpack environment (not minimized, but compiled bundle), after tween.start()
console is flooded with 1.bundle.js:27189 Uncaught TypeError: Cannot read property 'length' of undefined
.
I've found out that the code at line 27189
is https://github.com/thednp/kute.js/blob/master/kute-svg.js#L247
What can cause this issue? Are the any globals other than KUTE
SVG plugin relies on? My webpack configuration:
var webpack = require("webpack");
module.exports = {
entry: './src/main.js',
output: {
path: './dist',
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: require.resolve('zepto'), loader: 'imports?this=>window' },
{ test: require.resolve('kute.js'), loader: 'expose?KUTE' },
],
plugins: [
new webpack.ProvidePlugin({
KUTE: "kute.js"
})
]
},
resolve: {
modulesDirectories: ['node_modules', 'bower_components', 'web_modules']
}
};
kute.js is installed from npm. Fragment of package.json
:
"dependencies": {
"zepto": "^1.2.0",
"kute.js": "^1.5.0"
}
Requiring of KUTE in main.js
:
require(['zepto', 'kute.js', 'kute.js/kute-svg'], function(z, k, s) {
Squashed.
As of now, the plugin only adjusts the translation when scale is used, but rotation transform-origin
also need to be adjusted according to the translation. Fixed.
The plugin also does not tween the transform-origin
coordinates of rotation. WON'T FIX: the plugin will require proper order of transform functions, so no need to tween the transform origin coordinates, all just as described in the recommended draft. Forcing a certain order via the update function produces a significant performance drop.
Also the demo has no mixed SVG transforms. Fixed: also make some cool chained transform.
When using skews because the SVG coordinates system, the shapes get stretched and pushed along respective axis. We need to find a way to compensate with translate, similar to when scale is used. WON'T FIX - changing the translation based on skews complicates things alot and it's not reliable with yoyo, chains, etc.
Attempting a new version of SVG transforms. The new attempt is to get translation from computed matrix applying transform functions step by step, sounds like an interesting idea but I will try it nevertheless.
Update - I think I managed to get this thing to work properly, except stacking SVG transform chains.
This issue is now fixed.
Something like:
KUTE.setGlobalDefault({duration: 1000});
would be a great addition, since now I have to manually pass this for every Tween. Thoughts?
Hi,
I encounter issues in my ES6 project. When I require Kute.js and then the SVG plugin, here what the console outputs (without calling Kute):
kute-svg.js:26 - Uncaught TypeError: Cannot read property 'selector' of undefined
(the plugin does not know Kute).
And when I fix that, this happens:
kute.js:37 - Uncaught TypeError: Element not found or incorrect selector: path
(still without calling Kute, just requiring it).
Am i missing something?
Does KuteJs have an icon under development?
If no, then is there a need for the icon?
I figured there seem to be a problem with the minified kute.min.js
file regarding the KUTE.property()
method.
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.