Quick question around matrix/matrix3d transforms

[dogoku]

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)

[jlmakes]

Thanks @dogoku

...A matrix3d that flips the direction of the y movement (plus some scaling fixes)... 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)

The matrix represents relative transformation. If you were to create a matrix3d, with a 0 for the Y translation, that would represent a 0 pixel move in the Y-axis—not a locked 0 Y-coord.

I can quickly better explain how this works.

Order and Identity

The 3d affine transform matrices have a lot of information packed into them. Here's an example matrix showing the order the array values are in:

a  e  i  m
b  f  j  n
c  g  k  o
d  h  l  p

So when Rematrix.identity() returns a matrix representing no transformation:

[1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]

We could also represent that as a matrix like this:

1  0  0  0
0  1  0  0
0  0  1  0
0  0  0  1

Translation

Luckily, moving things around is one of the easier things we can do with a matrix; the 12th, 13th, 14th index represent the XYZ translation:

1  0  0  Tx
0  1  0  Ty
0  0  1  Tz
0  0  0  1

See an example in the Rematrix source.

These 3 values can be set to any pixel value to control translation, so for example, this would move the element 50px down from its current position:

1  0  0  0
0  1  0  50
0  0  1  0
0  0  0  1

But we don't want to have to do that manually, so we have Rematrix.translateY(50)

 

Whatever your goal is, it's up to you to plug in the correct transformation values.

[dogoku]

Wow! Thanks for the details answer! I realised as much, but it's always to have a confirmation.
In the end, I'm listening to scroll and applying a translateY as you suggested.