deblan/kute.js
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Mostly doc updates

Browse source
This commit is contained in:
thednp 2016-12-20 22:06:23 +02:00
parent eee3554bd0
commit 0433d479d7
5 changed files with 19 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
demo/examples.html
View file

@ -191,13 +191,13 @@ var tween2 = KUTE.fromTo('selector1',{skewY:0},{skewY:45}).start();
'selector1', // element
{translateX:0, rotateX:0, rotateY:0, rotateZ:0}, // from
{translateX:250, rotateX:360, rotateY:15, rotateZ:5}, // to
{perspective:400, perspectiveOrigin: 'center top'} // trasform options
{perspective:400, perspectiveOrigin: 'center top'} // transform options
);
var tween2 = KUTE.fromTo(
'selector2', // element
{translateX:0, rotateX:0, rotateY:0, rotateZ:0}, // from values
{translateX:-250, rotateX:360, rotateY:15, rotateZ:5}, // to values
{parentPerspective:400, parentPerspectiveOrigin: 'center top'} // trasform options
{parentPerspective:400, parentPerspectiveOrigin: 'center top'} // transform options
);
</code></pre>
<p>Now you can see we are using the specific transform options, the first tween object uses these settings for an element and the second for its parent.</p>

2
demo/src/kute.min.js vendored
View file

File diff suppressed because one or more lines are too long

9
demo/svg.html
View file

@ -432,7 +432,14 @@ var rotationTween = KUTE.to(element, {svgTransform: {rotate: 150}}, { transformO
<li>Similar to the CSS3 transform animation featured in the core engine, the <code class="bg-indigo">svgTransform</code> property DOES stack transform functions for chained tween objects created with the <code>.to()</code> method, you will have to provide only values for the functions that will change and the plugin will try to keep the unchanged values. However, there's a catch: you need to follow the properties that change and I highly recommend checking the example code for skews in the <a href="./assets/js/svg.js">svg.js</a> file.</li>
<li>In other cases when you need maximum control and precision or when shapes are already affected by translation, you might want to use the <code>.fromTo()</code> method with all proper values.</li>
<li>Also the <code class="bg-indigo">svgTransform</code> feature does not support 3D transforms, because they are not supported in all browsers.</li>
<li>Rotations will always use the <i>valuesEnd</i> value of the transform origin and cannot be animated, so that translations don't get messed up.</li>
<li>This feature does not work with SVG specific chained transforms right away (do not confuse with tween chain), but luckily there is a workaround<br>EG: <code>transform="translate(150,150) rotate(45) translate(-150,-150)"</code>.<br>In this case I would recommend using the values of the first translation as transform-origin for your tween, like so:<br>
<pre><code class="language-javascript">// a possible workaround for animating a SVG element that uses chained transform functions
KUTE.fromTo(element,
{svgTransform : { translate: 0, rotate: 45, skewX: 0 }}, // startValues we asume the current translation is zero on both X and Y axis
{svgTransform : { translate: 450, rotate: 180, skewX: 20 }}, // endValues we will translate to a 450 value horizontaly and skew the X axis by 20 degrees
{transformOrigin: [150,150]} // tween options use the transform-origin of the target SVG element
).start();
</code></pre>This way we make sure to count the real current transform-origin and produce a consistent animation with the SVG coordinate system.</li>
</ul>

2
dist/kute.min.js vendored
View file

File diff suppressed because one or more lines are too long

14
kute.js
View file

@ -92,10 +92,6 @@
h.style.color = ''; return { r: parseInt(webColor[0]), g: parseInt(webColor[1]), b: parseInt(webColor[2]) };
}
},
preventScroll = function (e) { // prevent mousewheel or touch events while tweening scroll
var data = document.body.getAttribute('data-tweening');
if (data && data === 'scroll') { e.preventDefault(); }
},
rgbToHex = function (r, g, b) { // transform rgb to hex or vice-versa | webkit browsers ignore HEX, always use RGB/RGBA
return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
},
@ -273,7 +269,7 @@
this.valuesStart[transformProperty]['perspective'] = this.valuesEnd[transformProperty]['perspective'];
}
// element transform origin / we filter it out for svgTransform to fix the Firefox transformOrigin bug https://bugzilla.mozilla.org/show_bug.cgi?id=923193
if ( ops.transformOrigin !== undefined && (!('svgTransform' in this.valuesEnd)) ) { el.style[property('transformOrigin')] = ops.transformOrigin; }
if ( ops.transformOrigin !== undefined && (!('svgTransform' in this.valuesEnd)) ) { el.style[property('transformOrigin')] = ops.transformOrigin; } // set transformOrigin for CSS3 transforms only
if ( ops.perspectiveOrigin !== undefined ) { el.style[property('perspectiveOrigin')] = ops.perspectiveOrigin; } // element perspective origin
if ( ops.parentPerspective !== undefined ) { el.parentNode.style[property('perspective')] = ops.parentPerspective + 'px'; } // parent perspective
if ( ops.parentPerspectiveOrigin !== undefined ) { el.parentNode.style[property('perspectiveOrigin')] = ops.parentPerspectiveOrigin; } // parent perspective origin
@ -440,15 +436,19 @@
setTimeout(function(){ if (!tweens.length) { stop(); } }, 48); // when all animations are finished, stop ticking after ~3 frames
},
preventScroll = function (e) { // prevent mousewheel or touch events while tweening scroll
var data = document.body.getAttribute('data-tweening');
if (data && data === 'scroll') { e.preventDefault(); }
},
scrollOut = function(){ //prevent scroll when tweening scroll
if (( 'scroll' in this.valuesEnd || 'scrollTop' in this.valuesEnd ) && document.body.getAttribute('data-tweening')) {
if ( 'scroll' in this.valuesEnd && document.body.getAttribute('data-tweening')) {
document.removeEventListener(touchOrWheel, preventScroll, false);
document.removeEventListener(mouseEnter, preventScroll, false);
document.body.removeAttribute('data-tweening');
}
},
scrollIn = function(){
if (( 'scroll' in this.valuesEnd || 'scrollTop' in this.valuesEnd ) && !document.body.getAttribute('data-tweening')) {
if ( 'scroll' in this.valuesEnd && !document.body.getAttribute('data-tweening')) {
document.addEventListener(touchOrWheel, preventScroll, false);
document.addEventListener(mouseEnter, preventScroll, false);
document.body.setAttribute('data-tweening', 'scroll');