Javascript animation issue

JavaScript
1

Hey,

a few months ago I found a cool JS animation tutorial on Youtube. I then used the animation on an e-commerce site of a friends business. The “pop-out” animation stopped working last week and I can’t figure out why.( FYI, I’m not a developer - I just do this stuff for fun) . I’ve contacted the developer on GitHub regarding the issue, but I haven’t received a reply. I know it’s a big ask, but any help/advice would be much appreciated. Please check it out and let me know what has changed. Thanks

Here is the Youtube vid:

https://www.youtube.com/watch?v=XK7T3mY1V-w

Here is the code:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3d Card Effect</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">


</head>
<body>

    <div class="container">
        <div class="card">
            <div class="sneaker">
                <div class="circle"></div>
                <img src="./adidas.png" alt="adidas"> <!--  use any image here -->
            </div>
            <div class="info">
                <h1 class="title">JAVA</h1>
                <h3>A warehouse admin program</h3>
                <div class="sizes">
                    <button>39</button>
                    <button>40</button>
                    <button class="active">42</button>
                    <button>44</button>
                </div>
                <div class="purchase">
                    <button>View Project Here</button>
                </div>
            </div>
        </div>
    </div>
    <script src="./app.js"></script>
</body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
}
.container {
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card {
  transform-style: preserve-3d;
  min-height: 70vh;
  width: 35rem;
  border-radius: 30px;
  padding: 0rem 5rem;
  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2), 0px 0px 50px rgba(0, 0, 0, 0.2);
}

.sneaker {
  min-height: 35vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sneaker img {
  width: 15rem;
  z-index: 2;
  transition: all 0.75s ease-out;
}
.circle {
  width: 15rem;
  height: 15rem;
  background: linear-gradient(
    to right,
    rgba(245, 70, 66, 0.75),
    rgba(8, 83, 156, 0.75)
  );
  position: absolute;
  border-radius: 50%;
  z-index: 1;
}

.info h1 {
  font-size: 3rem;
  transition: all 0.75s ease-out;
}
.info h3 {
  font-size: 1.3rem;
  padding: 2rem 0rem;
  color: #585858;
  font-weight: lighter;
  transition: all 0.75s ease-out;
}
.sizes {
  display: flex;
  justify-content: space-between;
  transition: all 0.75s ease-out;
}
.sizes button {
  padding: 0.5rem 2rem;
  background: none;
  border: none;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  border-radius: 30px;
  cursor: pointer;
  font-weight: bold;
  color: #585858;
}
button.active {
  background: #585858;
  color: white;
}
.purchase {
  margin-top: 5rem;
  transition: all 0.75s ease-out;
}
.purchase button {
  width: 100%;
  padding: 1rem 0rem;
  background: #f54642;
  border: none;
  color: white;
  cursor: pointer;
  border-radius: 30px;
  font-weight: bolder;
  margin-bottom: 10px;
}

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");
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(${xAxis}deg) rotateX(${yAxis}deg)`;
});
//Animate In
container.addEventListener("mouseenter", (e) => {
  card.style.transition = "none";
  //Popout
  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.transition = "all 0.5s ease";
  card.style.transform = `rotateY(0deg) rotateX(0deg)`;
  //Popback
  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)";
});
2

That’s a long tutorial to watch!

In case it helps anyone, I have created a Codepen with your code:

https://codepen.io/gandalf458/pen/WNOqEPR

1 Like
3

Hi Gandalf. Thanks for the fast reply. Indeed it is ;). And your Codepen is exaclty what I have on my page now and it is completely out of sorts even though it is identical to the tutorial code. Here is the GitHub:

https://github.com/developedbyed/3d-card-effect

It typically looks as if it needs to be updated somewhere, but no library is being used, which confuses me. No idea what is happening! :frowning:

Anyways, thanks

1 Like
4

I downloaded the code from Github and it worked “out of the box” so perhaps you have something on your page that is clashing with the script?

1 Like
5

Hi Gandalf. If it’s not too much trouble can you please add it to Codepen so I can compare? I also just copied the code from GitHub but the pop-out effect is not working my side. :thinking:

6

Here ya go

https://codepen.io/gandalf458/pen/powXKPL

Edit: Now I’ve added the image, it looks as though the previous Pen works.

7

Hi Gandalf,

ok the actual 3d effect is also not working on your example. In the first few seconds of the tutorial you can actually see what it is supposed to look like. Check it out if you want.The issue is that everything on the card needs to pop-out of the screen and not just slightly shift. Nothing has changed with the code, so I really don’t know where the problem is. Either something new needs to be added now or something in the original code is outdated…i think :wink:

…Or maybe i messed up some setting on my pc or browser?

Thanks

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.