app.js

// movement animation to happen
const card = document.querySelector(`.card`);
const container = document.querySelector(".container");
// Items
const title = document.querySelector(`.title`);
const sneaker = document.querySelector(`.sneaker img`);
const purchase = document.querySelector(`.purchase button`);
const description = document.querySelector(`.info h3`);
const sizes = document.querySelector(`.sizes`);

// Moving animation event
container.addEventListener(`mousemove`, (e) => {
    let xAxis = (window.innerWidth / 2 - e.pageX) /25;
    let yAxis = (window.innerHeight / 2 - e.pageY) /25;
card.style.transform = `rotateY(${yAxis}deg) rotateX(${xAxis}deg)`;
});
// Animate In
container.addEventListener(`mouseenter`, e => {
    card.style.transition = 'none'; 

// Pop out
title.style.transform = `translateZ(150px)`;
sneaker.style.transform = `translateZ(200px) rotateZ(-45deg)`;
description.style.transform = `translateZ(125px)`;
sizes.style.transform = `translateZ(100px)`;
purchase.style.transform = `translateZ(75px)`;
});


// Animate Out
container.addEventListener(`mouseleave`, e => {
    card.style.transform = `rotateY(0deg) rotateX(0deg)`;

// Pop Back
title.style.transform = `translateZ(0px)`;
sneaker.style.transform = `translateZ(0px) rotateZ(0deg)`;
description.style.transform = `translateZ(0px)`;
sizes.style.transform = `translateZ(0px)`;
purchase.style.transform = `translateZ(0px)`;
});