feat: adds rotation property

[brenoliradev]

I saw the following issue #14024 and give it a shot since it seamed something easy to adopt.

Ping me if the pattern isn't as expected or if I missed anything.

Cheers,

[changeset-bot]

⚠️ No Changeset found

Latest commit: fdf543c

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[MathiasWP]

Shouldn't the rotation be computed from the from state to the to state? It seems like this just sets the rotation to some arbitrary number.

[brenoliradev]

Yeah. In this case it's just some arbitrary rotation that'll be played using the u as a reference so it'll starts from rotation and ends on 0deg.

About using "from" and "to" I don't think it's doable without much changes since from and to are DOMRect so their props are just height: number; width: number; x: number; y: number; .

But If you think it's better I can swap to something like rotation={from: number, to: number} and I think it'll make it work as you're expecting.

But a question that pops up is that when the animation ends svelte does removes it's style so I think that's somewhat counterintuitive to have an end another than "0" which would be the "default" rotate.

[Rich-Harris]

Thank you but this doesn't really solve the feature request. The goal is to be able to morph arbitrary elements into each other based on their rotations (and sizes and positions and whatever else) — you shouldn't have to manually specify a rotation any more than you have to specify scale or translate. Figuring that stuff out is what the function is for.

To do it reliably will be tricky — it should account for the current transform matrix of each element (accounting for all their ancestor elements) and use matrix decomposition to compute a sensible set of transforms. If options are involved they should be to do things like increase the scale at the midpoint (for a 'bump' effect) or ensure that the rotation is clockwise/anticlockwise or add an extra spin etc.

[brenoliradev]

Oh. Now I get it.

I totally missed what was expected from the rotation behavior. I'll dedicate more time to this issue.

Thanks!

[brenoliradev]

That's probably my best shot. I'm feeling kinda stucked rn.

Tried to achieve it without changing that much the current structure. Would love to recieve pointers/feedback.

Cheers,

Reproducible playground: https://svelte.dev/playground/6e2424425ad44ae3968707b755f34266?version=5.1.9

[pkg-pr-new]

pnpm add https://pkg.pr.new/svelte@14028

commit: a41e301

[Rich-Harris]

preview: https://svelte-dev-git-preview-svelte-14028-svelte.vercel.app/

this is an automated message

[brenoliradev]

What about validating this calculation like this:

 function get_initial_angle(transform) {
	if (typeof transform === 'string') return 0

	var m = new DOMMatrixReadOnly(transform);

	return Math.atan2(m.m21, m.m11);
 }
 

	 var rf = get_initial_angle(transform) + Math.atan2(from.bottom - from.top, from.right - from.left);

I think skipping these calculations if transform is none would be cool when multiple elements without initial transforms are animated but I'm unsure how much it would impact complex transformations

[Rich-Harris]

Thanks for the PR but I'm going to close this to keep the queue tidy, as this doesn't appear to change the behaviour in a useful way (you can see if you add some rotation to the demo above, the crossfade doesn't account for it any more than it does today). It would be nice to account for more complicated transformations, but it will require a complete rethink of the approach, and should happen in the context of discussions around view transitions support and replacing the current transition directives with something more flexible based on attachments.