document.addEventListener('DOMContentLoaded', () => { const main = document.querySelector('main'); // Function to open a card function openCard(card) { const contentId = card.getAttribute('data-content-id'); const content = document.querySelector(contentId); const bg = card.style.backgroundImage; const rect = card.getBoundingClientRect(); // Create a temporary overlay for the animation const animatableOverlay = document.createElement('div'); document.body.appendChild(animatableOverlay); // Set initial state of the overlay to match the card gsap.set(animatableOverlay, { position: 'fixed', top: rect.top, left: rect.left, width: rect.width, height: rect.height, backgroundImage: bg, backgroundSize: 'cover', backgroundPosition: 'center', borderTopRightRadius: '150px', zIndex: 9999, }); // Hide the main card grid immediately main.style.visibility = 'hidden'; // Animate the overlay to full screen gsap.to(animatableOverlay, { duration: 0.8, top: 0, left: 0, width: '100vw', height: '100vh', borderTopRightRadius: '0px', ease: 'power3.inOut', onComplete: () => { document.body.appendChild(content); // Show the actual content container content.style.display = 'block'; content.style.backgroundImage = bg; content.style.backgroundSize = 'cover'; content.style.backgroundPosition = 'center'; // Fade in the whole container (including box-shadow and inner content) gsap.to(content, { duration: 0.5, opacity: 1 }); const innerContent = content.querySelector('.content-inner'); gsap.to(innerContent, { duration: 0.5, opacity: 1 }); // Remove the temporary animation overlay animatableOverlay.remove(); } }); } document.querySelectorAll('.card').forEach(card => { card.addEventListener('click', (e) => { e.preventDefault(); openCard(card); }); }); document.querySelectorAll('.close-button').forEach(button => { button.addEventListener('click', (e) => { e.preventDefault(); const content = button.closest('.card-content'); const card = document.querySelector(`[data-content-id="#${content.id}"]`); const rect = card.getBoundingClientRect(); // 1. Fade out the whole container gsap.to(content, { duration: 0.3, opacity: 0, onComplete: () => { // 2. Create the animatable overlay const animatableOverlay = document.createElement('div'); document.body.appendChild(animatableOverlay); gsap.set(animatableOverlay, { position: 'fixed', top: 0, left: 0, width: '100vw', height: '100vh', backgroundImage: content.style.backgroundImage, backgroundSize: 'cover', backgroundPosition: 'center', zIndex: 9999, }); // 3. Hide the content container content.style.display = 'none'; content.style.backgroundImage = ''; // Clean up // 4. Make the main grid visible again main.style.visibility = 'visible'; // 5. Animate the overlay shrinking back to the card gsap.to(animatableOverlay, { duration: 0.8, top: rect.top, left: rect.left, width: rect.width, height: rect.height, borderTopRightRadius: '150px', ease: 'power3.inOut', onComplete: () => { // 6. Remove the overlay animatableOverlay.remove(); } }); } }); }); }); // Check for a hash in the URL on page load if (window.location.hash) { const cardToOpen = document.querySelector(`[data-content-id="${window.location.hash}"]`); if (cardToOpen) { // A slight delay might be necessary to ensure all elements are fully rendered setTimeout(() => { openCard(cardToOpen); }, 100); } } });