Как реализовать плавный переход изображений общего элемента (миниатюра к полноэкранному наложению и обратно) с GSAP? ⇐ CSS

[Anonymous]

Я разрабатывал свое портфель и хотел использовать эту анимацию известным дизайнером Патриком Дэвидом.
в их портфеле: https://bepatrickdavid.com, в разделе «Проекты», когда кто -то нажимает на любой проект, который он создает захватывающий оверлей и отскакивает, когда мы нажимаем, какой будет наиболее оптимизированный метод, чтобы достичь этого? Я попытался использовать GSAP и сохранить позиции Intiial и FinalRect и перемещать изображение с начального к финалу, например: < /p>
Но у этого есть много проблем, так как просмотр в мобильных устройствах динамичен и делает анимационную сбоку и не оптимизированный, может ли кто -нибудь предложить наиболее надежный способ сделать это? Scrollsmoether вмешался в наложенный Div с данным содержимым, если я пошел в этот путь. < /p>
useEffect(() => {
const isBlogReturning = sessionStorage.getItem('isBlogReturning') === 'true';
const fromRect = JSON.parse(sessionStorage.getItem('blogImageFinalRect'));
const toRect = JSON.parse(sessionStorage.getItem('blogImageRect'));
const imageSrc = sessionStorage.getItem('blogImageSrc');
if (isBlogReturning && fromRect && toRect && imageSrc) {
document.body.style.overflow = 'hidden';
document.body.style.pointerEvents = 'none'; // Disable pointer events during animation
const clone = document.createElement('img');
clone.src = imageSrc;
clone.style.position = 'fixed';
clone.style.top = `${fromRect.top}px`;
clone.style.left = `${fromRect.left}px`;
clone.style.width = `${fromRect.width}px`;
clone.style.height = `${fromRect.height}px`;
clone.style.objectFit = 'cover';
clone.style.zIndex = 9999;
clone.style.transition = 'all 1s ease';
document.body.appendChild(clone);

requestAnimationFrame(() => {
clone.style.top = `${toRect.top}px`;
clone.style.left = `${toRect.left}px`;
clone.style.width = `${toRect.width}px`;
clone.style.height = `${toRect.height}px`;
});

setTimeout(() => {
document.body.style.overflow = '';
document.body.style.pointerEvents = '';
document.body.removeChild(clone);
sessionStorage.removeItem('blogImageFinalRect');
sessionStorage.removeItem('blogImageRect');
sessionStorage.removeItem('blogImageSrc');
sessionStorage.removeItem('isBlogReturning');
}, 1100);
}
}, []);


Подробнее здесь: https://stackoverflow.com/questions/796 ... o-fullscre