jlmakes / rematrix Goto Github PK

Animating transforms requires computing intermediary states at arbitrary intervals between two transforms.

I propose the addition of a interpolate(from, to, progress)

I want to change transform-origin, then apply scale...
But Rematrix still uses the old transform-origin.

First of all, this is so good 👍 My linear algebra is dead in the water, what do you think of adding some methods or examples on how to:

1. Pan with a pivot
2. Zoom with a pivot
3. Adding constraints such as limiting transform to parent bounding box

Is it possible to reshape 3dmatrix[16] to a 2dmatrix[9]?

First of all, great job with this library - the code is well-documented and clear. I was up late last night looking for a good library for manipulating CSS transforms, and was very happy to find this one!

I was wondering if you would be open to the following (small) features? I can definitely help with some of them, let me know if you are willing to accept PRs on any of these.

• b45c121 — Rematrix.toString([...]) for converting a matrix array to a CSS string.

• 574e24e — Rematrix.rotate(...) that defaults to Rematrix.rotateZ(...) (re: CSS spec)

• Something that allows you to specify the unit for rotation, e.g. Rematrix.rotate(0.5, 'rad') perhaps? (Moved to #2)

• Decomposition: probably a bigger feature ask, but a way to decompose a matrix and grab specific values such as translateX, skewY, rotateZ, scaleY, etc. from it?

• 0817c2d — Typescript definition file

Thanks so much for this library!

It's not hard to do such a function (and I will do one for my personnal usage), but why is there no function to apply the matrix to a point ? (would be convenient convert coordinate page to element coordinate ?)

...Or at least a column vector (just to set z to 0 and w to 1)

Something that allows you to specify the unit for rotation, such as rad or turn Rematrix.rotate(0.5, 'rad') perhaps?

— @davidkpiano

Units

• deg — Degrees. There are 360 degrees in a full circle.
• grad — Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle.
• rad — Radians. There are 2π radians in a full circle.
• turn — Turns. There is 1 turn in a full circle.

Source: https://drafts.csswg.org/css-values-3/#angles

Re: #1

import * as Rematrix from 'rematrix';

const r1 = Rematrix.rotate(50);
const r2 = Rematrix.rotate(40);
    
const product = Rematrix.multiply(r1, r2);

Now:

const css = 'transform: matrix3d(' + product.join(', ') + ')';

Proposed:

A:

const css = 'transform: ' + Rematrix.toString(product);

B:

const css = Rematrix.toString(product);

Note: Also here I think toString() should prefix output (e.g. with -webkit-) when necessary.

Re: #1

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale3d

Lovely library you made, seems like you know a lot about matrix transforms and math.

Do you know if it's possible to use matrix/matrix3d to lock a coordinate in place.

I am trying to essentially create a sticky component inside a overflow scroll container, but I don't understand the math (or if it's even possible) to do that.

I know it's possible to use matrix3d to make a very cheap scrollbar based on this article, which applies a matrix3d that flips the direction of the y movement (plus some scaling fixes). See demo

I was thinking, why not use the same idea to create a sticky item, but lock y to 0, so that it never moves at all (i.e sticky to top of its container)