Ümit Tunç
108 lines
1.7 KiB
JavaScript
108 lines
1.7 KiB
JavaScript
const split = (text, type = "chars") => {
|
|
text.setAttribute("aria-label", text.textContent);
|
|
const splits = new SplitText(text, { type });
|
|
splits[type].forEach((char) => char.setAttribute("aria-hidden", "true"));
|
|
return splits[type];
|
|
};
|
|
|
|
addEventListener("GSAPReady", (event) => {
|
|
|
|
const section = document.querySelector("[data-animate='videogrow']");
|
|
const video = section.querySelector("[data-videogrow='video']");
|
|
const img = video.children[0];
|
|
|
|
const title = split(
|
|
section.querySelector("[data-videogrow='title']"),
|
|
"chars"
|
|
);
|
|
|
|
const tl = gsap.timeline({
|
|
scrollTrigger: {
|
|
trigger: section,
|
|
start: "top center",
|
|
end: "bottom bottom+=100%",
|
|
invalidateOnRefresh: true,
|
|
scrub: 1,
|
|
},
|
|
});
|
|
|
|
gsap.set(
|
|
title,
|
|
{
|
|
scale: 0,
|
|
rotation: (i) => Math.random() * 360 - 180,
|
|
})
|
|
|
|
tl.to(
|
|
title,
|
|
{
|
|
scale: 1,
|
|
duration: 0.2,
|
|
rotation: 0,
|
|
ease: "expo.out",
|
|
stagger: {
|
|
each: 0.05,
|
|
from: "random",
|
|
},
|
|
}
|
|
);
|
|
|
|
tl.fromTo(
|
|
video,
|
|
{
|
|
clipPath: "inset(10% 50% 10% 50%)",
|
|
yPercent: 100,
|
|
},
|
|
{
|
|
ease: "power3",
|
|
clipPath: "inset(0% 0% 0% 0%)",
|
|
duration: 1,
|
|
yPercent: 0,
|
|
},
|
|
".3"
|
|
);
|
|
|
|
tl.fromTo(
|
|
video,
|
|
{
|
|
scale: 0.5,
|
|
// rotation: 180,
|
|
},
|
|
{
|
|
ease: "back.inOut(.2)",
|
|
scale: 1,
|
|
duration: 0.8,
|
|
// rotation: 0,
|
|
},
|
|
"<"
|
|
);
|
|
|
|
tl.fromTo(
|
|
img,
|
|
{
|
|
scale: 2.8,
|
|
yPercent: 40,
|
|
},
|
|
{
|
|
scale: 1.2,
|
|
duration: 0.8,
|
|
delay: 0.2,
|
|
yPercent: 0,
|
|
},
|
|
"<"
|
|
);
|
|
|
|
tl.to(video, {
|
|
scale: 0.9,
|
|
ease: "linear",
|
|
});
|
|
|
|
tl.to(
|
|
img,
|
|
{
|
|
scale: 1,
|
|
ease: "linear",
|
|
},
|
|
"<"
|
|
);
|
|
}); |