Develop Reference

Calculate the edge coordinates of the dom element after transform the dom element using css rotateX, rotateY, perspective

I use rotateX, rotateY, perspective to achieve the effect of transform elements.
I use getBoundingClientRect() to get the top, left, bottom, right, width, height of the element.
How to calculate the four vertices coordinate of the (dom element) after the image is transform.
sorry my enlish is bad
video demo:https://i.imgur.com/YYArUMz.mp4
image demo:

Element.getBoundingClientRect considers the current CSS/SVG transform(CSSOM View Module). See it for yourself, while transform is changing, the return value of getBoundingClientRect will also change.

GSAP: preserve previous transformations when animating SVG

I am making a small interactive website using scrollmagic and GSAP to animate SVG elements.
However, when animating the y value of an element that had a rotate() transformation, the transformation was removed.
Adding the rotation into the animation did not yield the right result; the rotation was removed from the animation and then animated back in again.
Does anyone know how to preserve the rotation of an SVG element when animating other attributes in GSAP?
example code:
html:
<svg height='300px' width='500px' style='position: absolute;'>
<rect id='rect' width='200' height='75' style='fill:#888;stroke-width:2;stroke:#000' y='0' x='120' transform='rotate(45)' />
</svg>
js:
TweenMax.to('#rect', 1, {x: 100})
fiddle: https://jsfiddle.net/159phcxw/

Short answer: as Tahir suggested, just add this to your JS code:
TweenMax.set("#rect", {rotation:45});
I'd strongly recommend handling all of your transforms through GSAP because it protects you from a bunch of things like browser inconsistencies and loss of precision with rotational values beyond 360 degrees.
GSAP records transform-related values in a special _gsTransform object that's attached to the element itself; this not only boosts performance (no re-parsing of computed style matrix or matrix3d values), but also permits complete independent control of each transform component (rotation, scaleX, scaleY, x, y, skewX, skewY, etc.) regardless of timing offsets or extreme rotational values (impossible with CSS).
In your case, you were mixing transforms - you put the rotation in the attribute and then you asked GSAP to handle the translation. GSAP can actually parse matrix() values you put into the transform attribute or it can also parse any CSS transforms, but you happened to define only a rotate() which is not able to be parsed (I'll spare you the explanation).
Setting any transform-related values through GSAP gets you the best performance and compatibility, plus it's easier to look up current values inside the _gsTransform object later if you need them.

Is there any Draw2d.js canvas destroy method?

I have a question about Draw2D.js. I'm resizing the Canvas by using JQuery-ui, but when I resize the canvas I have to destroy it and create a new one ... Otherwise I'll have many canvases overlapping. If I call canvas.destroy() nothing works (as mentioned in the documentation).
There is any way to do a soft destroy of the canvas? Is any resize fuunctionaility in JQuery-ui?
Thank you #MacGyver, i find solution in the second propostion. We have
to edit the SVG DOM :)
i share my solution here jsfiddle!
it may helps!

You should be able to dynamically change your DOM node of your canvas, by setting the width and height manually. Here, we have a width of 2500px and a height of 2500px.
<div onselectstart="javascript:/*IE8 hack*/return false" id="draw2d" style="width:2500px; height:2500px;-webkit-tap-highlight-color: rgba(0,0,0,0);"></div>
canvas.setScrollArea("draw2d");
Or change the width and height of the DIV tag dynamically using JavaScript.
Another alternative is to set the zoom dynamically:
canvas.setZoom(1); // default 1x (1:1 zoom)
canvas.setZoom(.5); // .5x (1:2 zoom)
canvas.setZoom(2); // 2x (2:1 zoom)
Then call the app.layout() function
Reference:
http://draw2d.org/draw2d_touch/jsdoc/#!/api/draw2d.Canvas

Move a div in a curved path (like tweening in Flash old days)?

I'd like to build a function like
fromHeretoThere(x1,y1,x2,y2){
//....
}
So that I can move a <div> or an image from one point on the HTML page to another point in a curve.
Is this doable only using Canvas? HTML5? any plugin/scripts yo suggest?

Edit: Here's a work in progress that packages up the second concept described below as a re-usable JS object. You can edit the code or visually drag the curve to see the resulting code:
http://phrogz.net/SVG/animation_on_a_curve.html
I'd personally use SVG, which makes this sort of thing (animating along an arbitrary Bézier curve) trivial using the <animateMotion> element. As a bonus, you can even cause it to calculate the rotation for you. Some examples:
http://www.w3.org/TR/SVG/images/animate/animMotion01.svg
https://developer.mozilla.org/en/SVG/Element/animateMotion
http://devfiles.myopera.com/articles/76/SolarSystem.svg
Note that you don't even have to actually use SVG to display the result; you could simply create an off-screen SVG with this animation and sample the transform of the animated element to get your desired point/rotation.
Alternatively (if you don't want the rotation, or want to calculate it yourself while controlling the rate of traversal) you can create an SVG path and just use getPointAtLength()/getTotalLength() to find where you should be along the path at a given percentage of the total traversal distance. With this you don't even need an SVG document:
// Moving along an S curve from 0,0 to 250,450
var p = document.createElementNS('http://www.w3.org/2000/svg','path');
p.setAttribute('d','M0,0 C350,20 -200,400 250,450');
var len = p.getTotalLength();
for (var i=0;i<=100;i+=10){
var pct = i/100;
var pt = p.getPointAtLength(pct*len);
console.log( i, pt.x, pt.y );
}
// 0 0 0
// 10 65.54324340820312 10.656576156616211
// 20 117.17988586425781 49.639259338378906
// 30 120.2674789428711 114.92564392089844
// 40 100.49604034423828 178.4400177001953
// 50 78.06965637207031 241.1177520751953
// 60 63.526206970214844 305.9412841796875
// 70 74.59959411621094 370.6294860839844
// 80 122.1227798461914 415.8912658691406
// 90 184.41302490234375 438.8457336425781
// 100 250 450
Now all you have to do is set the .style.top and .style.left of your <div> or <img> appropriately. The only 'hard' part is deciding what you want to the curve to look like and defining where to put the handles.

sometimes googling is easier:
http://yuilibrary.com/yui/docs/anim/curve.html

You can use at least:
JavaScript (http://api.jquery.com/animate/)
CSS3 Transitions (http://www.the-art-of-web.com/css/css-animation/)
Canvas (https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images)
CSS3 is probably the easiest, but JavaScript would be the most browser compatible.
You may also want to look at something like this:
http://jsanim.com/
http://processingjs.org/
What is it that you're trying to do?

Using jQuery animate's step function you can animate in any curve you'd like.
For some things using a canvas is better, but for most small and simple animations just changing css values with jQuery (this is what animate does) is faster and simpler.
Here's a quick demonstration I made, built on top of the jQuery.path plugin : http://jsfiddle.net/zVddG/

Convert HTML element non-px dimensions to px in (IE issue)

I'm trying to get border width of a particular element.
Getting border width style setting is pretty easy by simply reading if from current calculated style of an element:
var styles = (
document.defaultView && document.defaultView.getComputedStyle ?
document.defaultView.getComputedStyle(de, null) :
de.currentStyle
);
Reading a particular border value is then rather simple by:
var top = styles.borderTopWidth;
var value = parseFloat(top);
This is all fine and dandy (as long as you don't use IE) and I can get top border width in the value variable. But this number relates to pixels only when border width was set in pixels. If it wasn't (was em for instance) than value has the number of that particular dimension.
I have to get an answer to any of these two questions:
How do I always get border width in pixels?
How do I calculate different units into pixels?
Example
I've prepared a jsFiddle example where you can see various dimensions reported by DOM and jQuery. Run it in different browsers and you'll see the difference in IE. All dimansions in Crome are in integer values while Firefox calculates margin and padding in floats while border in integers.
BTW: Margin, border and padding are all set to 2mm.

Most libraries solve this problem for you, as does YUI3 for example.
If you don't want to use those libraries, then at least you can peak at how they do it ;)
http://developer.yahoo.com/yui/3/api/dom-style-ie.js.html
Awnser contained therein.

You can generally get computed pixel sizes using element.offsetWidth and element.offsetHeight. This is somewhat sensitive if you want to support a range of browsers. In that case, use a library. For example, using jQuery you can get guaranteed pixel dimensions with something like this: jQuery("#theID").width().