[How to access an array elements child, while looping?]

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!

[TimelineLite is not defined]

2 minutes ago, GreenSock said:

It's probably due to the fact that you've got "async" on the script. So it doesn't wait until GSAP loads before executing your other JS. 

 

Also, you do NOT need to load TweenLite if you're already loading TweenMax because TweenMax has TweenLite inside of it. 

 

If you're still having trouble, please provide a reduced test case so we can see the issue in context. We'd be happy to take a peek. 

 

Happy tweening!

 

Yes, that solves the problem! 

Thanks a lot.

[TimelineLite is not defined]

UPDATE:

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

[TimelineLite is not defined]

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!