Elitzca

I have divided my home page into 4 divs with the class of ".div-pics". And my goal is everytime you hover on one of them a description appears /with the class of ".div-desc". The animation happens through Greensock TimelineLite and the initial position of the description divs is "top: 100%". The code I currently have works, but not with the desired effect. Right now once you hover any of the divs (.div-pics), all description divs (.div-desc) will appear. Instead I would like only the hovered div's description to come on screen, but I don't know how to target it. ! I have divided my home page into 4 divs with the class of ".div-pics". And my goal is everytime you hover on one of them a description appears /with the class of ".div-desc". The animation happens through Greensock TimelineLite and the initial position of the description divs is "top: 100%". The code I currently have works, but not with the desired effect. Right now once you hover any of the divs (.div-pics), all description divs (.div-desc) will appear. Instead I would like only the hovered div's description to come on screen, but I don't know how to target it. <div id="home-about" class="div-pics div-left"> <h1 class="div-title">About</h1> <div class="div-desc dl"> <div class="div-arrow"> <div class="arrow-part arrow-top"></div> <div class="arrow-part arrow-bottom"></div> </div> <p class="div-text dt-left"> Lorem ipsum ... </p> <li class="div-link"><a href="#">Order parts</a></li> </div> </div> function loopDivs() { divArray.forEach(div => { div.addEventListener("mouseover", showDetails); function showDetails() { tlDetails = new TimelineLite(); tlDetails .to(".div-desc", 0.5, { top: "0%" }); } }); } event.target - instead of ".div-desc" won't work since in my case I can't hover the .div-desc, because it is sent all the way down and it's invisible. My idea is to hover its parent and then it would appear. Thanks in advance!

Yes, that solves the problem! Thanks a lot.

UPDATE: Just found out everything works fine when opened with Mozilla. But it doesn't work in Chrome.

I am trying to animat a div, but the console throw and error. "TimelineLite is not defined" and I can't seem to understand where the problem comes from. Here are snippets of my html and js code. I tried with TimelineMax as well, same result. ? Help will be highly appreciated!