Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Elitzca

How to access an array elements child, while looping?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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!

Link to post
Share on other sites

Hello @Elitzca and Welcome to the GreenSock Forum!

 

Is there any reason why your not referencing this for the current node your hovering over? Then you wont have to specify that simple class selector targeting all elements with those classes. That will allow you to target this, which will be the element your currently hovering over.

 

this: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

 

You can see in the following codepen examples of running a loop to bind hover events to multiple elements. Then associating a timeline with each element and storing that timeline in the nodes properties to be accessed when hovering over each element.

 

Even though the below examples use jQuery for the loop, the technique is the same for vanilla JavaScript.

 

See the Pen KdYqWo by jonathan (@jonathan) on CodePen

 

and this one too

 

See the Pen rOgVEd by jonathan (@jonathan) on CodePen

 

I also noticed your HTML markup is malformed. You have an <li> tag with no parent of <ul> or <ol> in your above HTML markup.

 

So you have this:

 

<li class="div-link"><a href="#">Order parts</a></li>

 

It should be this with the <ul> or <ol>:

 

<ul>
  <li class="div-link"><a href="#">Order parts</a></li>
</ul>

 

If you provide a limited codepen we will be more than happy to help you figure out what your trying to do. Here is a link to how to create a limited codepen demo example so we can test your code live.

 

 

Happy Tweening! :)

 

  • Like 4
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×