like this
And I can calculate it in Native code,but i wonder if there's anything in gsap that simplifies the code
export function amplificationElementTransform(Element: HTMLElement) {
const bigImg = Element;
const bigElementStyle = bigImg.getBoundingClientRect();
const bodyElementStyle = {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight,
};
const imgCenterPosition = {
x: getLeft(bigImg) + bigElementStyle.width / 2,
y: getTop(bigImg) + bigElementStyle.height / 2,
};
const bodyCenterPosition = { x: bodyElementStyle.width / 2, y: bodyElementStyle.height / 2 };
const scaleWidth = bodyElementStyle.width / bigElementStyle.width;
const scaleHeight = bodyElementStyle.height / bigElementStyle.height;
function calculateX(){
return bodyCenterPosition.x - imgCenterPosition.x;
}
function calculateY(){
return bodyCenterPosition.y - imgCenterPosition.y;
}
function calculateScale(){
return scaleWidth > scaleHeight ? scaleWidth : scaleHeight;
}
const x = calculateX();
const y = calculateY();
const scale = calculateScale();
return {
x,
y,
scale
};
}
