// Add HTML to the document
document.body.innerHTML = html;
// GSAP Animation
document.addEventListener('DOMContentLoaded', () => {
const cards = document.querySelectorAll('.card');
const leftCard = document.querySelector('.card-left');
const middleCard = document.querySelector('.card-middle');
const rightCard = document.querySelector('.card-right');
// Initialize GSAP
gsap.registerPlugin(Elastic);
// Set initial state
gsap.set([leftCard, rightCard], {
x: (i, el) => el.classList.contains('card-left') ? '-40%' : '40%'
});
// Hover animation for middle card
middleCard.addEventListener('mouseenter', () => {
gsap.to(middleCard, {
backgroundColor: '#3498db', // Full color
scale: 1.1,
duration: 0.5,
ease: 'power2.out'
});
// Push side cards further out
gsap.to(leftCard, {
x: '-100%',
duration: 0.5,
ease: 'power2.out'
});
gsap.to(rightCard, {
x: '100%',
duration: 0.5,
ease: 'power2.out'
});
});
// Reset on mouse leave
middleCard.addEventListener('mouseleave', () => {
gsap.to(middleCard, {
backgroundColor: '#888', // Back to dark
scale: 1,
duration: 0.5,
ease: 'power2.out'
});
// Return side cards to original position
gsap.to(leftCard, {
x: '-40%',
duration: 0.5,
ease: 'power2.out'
});
gsap.to(rightCard, {
x: '40%',
duration: 0.5,
ease: 'power2.out'
});
});
// Optional: Add subtle hover effect for side cards
[leftCard, rightCard].forEach(card => {
card.addEventListener('mouseenter', () => {
gsap.to(card, {
scale: 1.05,
duration: 0.3,
ease: 'power1.out'
});
});
card.addEventListener('mouseleave', () => {
gsap.to(card, {
scale: 1,
duration: 0.3,
ease: 'power1.out'
});
});
});
});