thednp / kute.js

KUTE.js is a JavaScript animation engine for modern browsers.

Home Page:http://thednp.github.io/kute.js

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

reverse function?

donnervetter opened this issue · comments

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.

The tween object stores the original d attribute value somewhere, but you can do something more simple, to have full control over the values:

// cache the `d` attribute value
var pathONE = element.getAttribute('d');

// then create the tween object
var myMorph = KUTE.fromTo(element, { path: pathONE }, { path: pathTWO }, options);

// start animation
myMorphTween.start();

// later, come back to original value
element.setAttribute('d',pathONE);

You can wrap this up in a function you like, cool?