Ümit Tunç
72 lines
1.6 KiB
PHP
72 lines
1.6 KiB
PHP
<script>
|
|
{
|
|
addEventListener("GSAPReady", (event) => {
|
|
const wrapper = document.querySelector("[data-animate='footerlogo']");
|
|
if (!wrapper) return;
|
|
|
|
const paths = [...wrapper.querySelectorAll("path")].reverse();
|
|
const lastPath = paths[paths.length - 1];
|
|
|
|
// Configuration for the footer logo animation
|
|
const FOOTER_ANIMATION_CONFIG = {
|
|
STAGGER: 0.05,
|
|
VISIBILITY_DURATION: 0.1,
|
|
};
|
|
|
|
// Set initial state
|
|
gsap.set(paths, {
|
|
autoAlpha: 0,
|
|
});
|
|
|
|
const animateFooterLogo = () => {
|
|
// Reset the last path visibility before starting the animation
|
|
gsap.set(lastPath, { autoAlpha: 0 });
|
|
|
|
const tl = gsap.timeline();
|
|
|
|
paths.forEach((path, index) => {
|
|
const baseDelay = index * FOOTER_ANIMATION_CONFIG.STAGGER;
|
|
const isLastPath = index === paths.length - 1;
|
|
|
|
// Flash animation
|
|
tl.to(
|
|
path,
|
|
{
|
|
autoAlpha: 1,
|
|
duration: 0.1,
|
|
ease: "none",
|
|
},
|
|
baseDelay
|
|
);
|
|
|
|
// Only fade out if it's not the last path
|
|
if (!isLastPath) {
|
|
tl.to(
|
|
path,
|
|
{
|
|
autoAlpha: 0,
|
|
duration: 0.1,
|
|
ease: "none",
|
|
},
|
|
baseDelay + FOOTER_ANIMATION_CONFIG.VISIBILITY_DURATION
|
|
);
|
|
}
|
|
});
|
|
|
|
return tl;
|
|
};
|
|
|
|
// Create the scroll trigger
|
|
ScrollTrigger.create({
|
|
trigger: wrapper,
|
|
start: "top bottom",
|
|
end: "bottom top",
|
|
onEnter: () => animateFooterLogo(),
|
|
onEnterBack: () => animateFooterLogo(),
|
|
});
|
|
|
|
// console.log(event.detail);
|
|
});
|
|
}
|
|
</script>
|