GSAP ScrollTrigger: развернуть изображение вверх на весь экран и удерживать его в течение 15 вч. ⇐ CSS

[Anonymous]

Я пытаюсь добиться особого эффекта расширения с помощью прокрутки в React, используя @gsap/react и ScrollTrigger.
Требования:
Высота раздела: общая высота раздела составляет 115vh.
Триггер и рост: изображение начинается с небольшого размера. Как только его нижний край достигнет нижней части области просмотра, он должен начать расширяться.
Расширение вверх: изображение должно расти вверх, пока не достигнет 100vw и 100vh. Расширение должно быть завершено на расстоянии прокрутки 100 vh.
Закрепленное удержание: как только изображение развернется в полноэкранном режиме, оно должно оставаться прикрепленным/закрепленным в течение последних 15 vh продолжительности прокрутки раздела, прежде чем окончательно прокрутить его вместе с макетом.
import { useGSAP } from '@gsap/react';
import React, { useRef } from 'react';
import gsap from "gsap";
import { ScrollTrigger } from 'gsap/ScrollTrigger';

import img from "../assets/services/service-1.jpg";

gsap.registerPlugin(ScrollTrigger);

const Services = ({ content, heading }) => {
const sectionRef = useRef(null);
const pinRef = useRef(null);
const imgWrapperRef = useRef(null);

useGSAP(() => {
const initialWidth = imgWrapperRef.current.offsetWidth;
const initialHeight = imgWrapperRef.current.offsetHeight;
const growUpBy = () => -(window.innerHeight - initialHeight);

gsap.fromTo(
imgWrapperRef.current,
{ width: initialWidth, height: initialHeight, y: 0, borderRadius: "0.75rem" },
{
width: "100vw",
height: "100vh",
y: growUpBy,
borderRadius: 0,
ease: "none",
scrollTrigger: {
trigger: imgWrapperRef.current,
start: "bottom bottom",
end: "+=100%",
pin: pinRef.current,
scrub: true,
pinSpacing: true,
invalidateOnRefresh: true,
// markers: true,
}
}
);
}, { scope: sectionRef });

return (



[img]{img}
className='w-full h-full object-cover'
/>




);
};

export default Services;



Подробнее здесь: https://stackoverflow.com/questions/798 ... icky-for-1