thednp / kute.js Goto Github PK

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:

• lack of support for transformOrigin property (I mistakenly though it's same with perspectiveOrigin) but luckily the GURUs explain the diffs
• improve render functions performance
• remove the deprecated KUTE.Animate() method
• add methods for collections of elements
• all additional scripts are broken because incorrect UMD implementation
• maybe some cosmetics here and there.
• improve the prepare properties for flexibility
• add attributes plugin (experimental)
• add more SVG CSS props to supported list (stop-opacity, stroke, fill, stroke-width, etc)
• add matrix transforms
• remove requestAnimationFrame polyfill dependency?

Update

• new changes to the prototype to allow more flexibility and performance
• moved most uncommon CSS props to a new kute-css.js plugin
• introducing 2 new methods .allTo() and .allFromTo for collections of elements
• added a new tween option for the new methods called offset to set a delay between animations of these collections of elements
• removed deprecated method .Animate()
• improved performance for the render functions
• added support for transformOrigin tween setting
• documentation updates
• 'fixed' the additional tools UMD scripting
• added attributes plugin
• added SVG plugin for morph and other SVG related CSS properties (stop-opacity, stroke, fill, stroke-width, etc)
• added plugin for specific math operations for matrix transforms, extends how transforms work with KUTE.js (experimental), perhaps @nhylated can help solve the last piece of this puzzle
• fixed functions processing clip and backgroundPosition properties
• improved the color processing functions to also accept web safe colors
• added a selector utility
• added an auto-prefixer utility
• improvements to the prototype, now anything can be processed and executed outside the core
• added an extend guide featuring a boxShadow plugin
• added a Text Plugin
• simplify morph for polygon shapes

I'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?

Demo: https://codepen.io/pbj/full/qXoPXV/

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?

http://thednp.github.io/kute.js/options.html

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:

• now the Tween constructor is getting lighter, the tween objects created give alot more freedom to garbage collector DONE
• alot of public methods are no longer public, to simplify the Tween constructor and improve performance DONE
• the tween object will store the prefixed properties if that's the case, to improve performance DONE
• add perspective as a transform object property as already formatted string DONE
• box model props are transformed from % unit to px via element.offsetWidth DONE
• translations are transformed from % unit to px via element.offsetWidth / element.offsetHeight DONE
• rotations and skews are transformed from rad to deg via value * 180/Math.PI DONE
• add all SVG/non-SVG stack transforms and svg path processing into a new crossCheck object DONE
• apply this in all crossCheck functions DONE
• apply this in all parseProperty and prepareStart functions DONE

More 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:

• better code organization
• better performance all across the board
• much lighter size

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.

Here is a codepen i made.

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.

• number - used in core and all plugins
• array (uses the above number) used in SVG Plugin
• color (uses number) - used in core, CSS Plugin and SVG Plugin
• coords (use the array and number) - used in SVG Plugin only
• unit (like width: 25%) - used in core and plugins

UPDATE: 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.

morphIndex is referred to in the documentation but I do
not see it being used when I search the source.

Could you provide an example?

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.