We have the same issue, and would love to see this updated.
My company Kaon interactive, like many companies, uses SVGs for dynamic icon animation. We have recently run into an issue using icons directly from XD as they add a transform="translate" properties to every object. We are wondering if there might be a way for the Adobe dev teams to update the export featuer of the application to make this an option to be turned on or off. We run into a lot of challenges when working with these being automatically placed on all objects. We often find ourselves using the same object in many scenarios and it makes updating those objects very time consuming.
Below is a note from our lead developer as to our challenge.
Thank you for your time.
H.P. Stern
Hi
Transforms can be used to position, rotate, or scale an element.
Position and size could also be done with a handful of other mechanisms.
Transforms a special because the browser puts them on their own layer, it separates each transformed element from the rest of the page.
Browsers use a computer's GPU to render transformed layers, instead of the CPU that it runs javascript and the rest of the layout on.
Rendering on the GPU has pros and cons.
The pro is that the GPU can render a layer at 60 FPS regardless of what the CPU is doing. That means that you'll get the smoothest animation.
The con is that GPU typically has a small amount of memory compared to the main CPU. If the transformed element isn't going to move, it won't benefit from the FPS, and will just take up memory.
At Kaon, we use translation in animation.
We expect the natural position of an element to be determined by another mechanism, like top and left, or the natural page flow.
For example, let's say we want an animation to slide a few elements to the right and scale it up.
If those elements are naturally positioned using "left", they might look like this:
.exampleElement1 {
left:30px;
}
.exampleElement2 {
left:80px;
}
Here, we can write a class that we want to apply to all such elements. This says an element's natural transform should have 0 translation and a scale of 1, and if the transform changes, it should animate to the new value over 0.5 seconds:
HP Stern
supported this idea
·
We have the same issue, and would love to see this updated.
My company Kaon interactive, like many companies, uses SVGs for dynamic icon animation. We have recently run into an issue using icons directly from XD as they add a transform="translate" properties to every object. We are wondering if there might be a way for the Adobe dev teams to update the export featuer of the application to make this an option to be turned on or off. We run into a lot of challenges when working with these being automatically placed on all objects. We often find ourselves using the same object in many scenarios and it makes updating those objects very time consuming.
Below is a note from our lead developer as to our challenge.
Thank you for your time.
H.P. Stern
Hi
Transforms can be used to position, rotate, or scale an element.
Position and size could also be done with a handful of other mechanisms.
Transforms a special because the browser puts them on their own layer, it separates each transformed element from the rest of the page.
Browsers use a computer's GPU to render transformed layers, instead of the CPU that it runs javascript and the rest of the layout on.
Rendering on the GPU has pros and cons.
The pro is that the GPU can render a layer at 60 FPS regardless of what the CPU is doing. That means that you'll get the smoothest animation.
The con is that GPU typically has a small amount of memory compared to the main CPU. If the transformed element isn't going to move, it won't benefit from the FPS, and will just take up memory.
At Kaon, we use translation in animation.
We expect the natural position of an element to be determined by another mechanism, like top and left, or the natural page flow.
For example, let's say we want an animation to slide a few elements to the right and scale it up.
If those elements are naturally positioned using "left", they might look like this:
.exampleElement1 {
left:30px;
}
.exampleElement2 {
left:80px;
}
Here, we can write a class that we want to apply to all such elements. This says an element's natural transform should have 0 translation and a scale of 1, and if the transform changes, it should animate to the new value over 0.5 seconds:
https://pastebin.com/6VutSN7T