So I have an element that has a custom out transition, exactly this one:
export function rightScaleOut(node, options) {
let nodeTransform = node.style.transform;
return {
delay: options.delay,
duration: options.duration,
easing: options.easing,
css: (t) =>
`transform: ${nodeTransform} scaleX(${t}); transform-origin: top right;`,
};
}
Here's how I applied it to my element:
{#if show}
<div
out:rightScaleOut={{
delay: 150,
duration: 400,
easing: sineInOut,
}}
data-title="picture portfolio"
data-scroll-speed="1"
>
<img
on:click={transition}
on:keydown={transition}
src="pictures/portfolioPicture/landing.png"
alt="photography portfolio landing"
/>
</div>
{#/if}
So the problem that I have is that when the div
is getting out the element scale with him but I want the child to keep its original size.
I already checked this SO question but it didn't help.
As mentioned in your linked question, the size of the child can be kept constant by scaling it by 1 / factor
of the parent. This can be achieved with an additional custom transition on the image element
function rightScaleOutInverse(node, options) {
let nodeTransform = node.style.transform;
return {
delay: options.delay,
duration: options.duration,
easing: options.easing,
css: (t) =>
`transform: ${nodeTransform} scaleX(${1/t}); transform-origin: top left;`,
};
}