Scroll to the child element in horizontal scroll

[Denny]

Hello. I'm trying add ScrollTo to a child element. when I click a parent element, it works. But when i click Section 2 (id refer to child element), it does not work. How can I solve it?

See the Pen LYqWOOX by DennySenpai (@DennySenpai) on CodePen.

[Rodrigo]

Hi @Denny and welcome to the GSAP forums!

 

The problem here is that the getScrollLookup is looking for elements with the class .section and the element with the specific ID doesn't have a class section:

let getPosition = getScrollLookup(".section", {start: "center center", containerAnimation: scrollHorizontalTween});

<div class="section" >
  Section 2
  <div id="section2">Test</div>
</div>

See where this goes wrong?

 

I made some changes in your demo, by adding a data attribute to the element that is pointing to a child and to the function returned by the getScrollLookup method in order to accommodate this particular scenario. Be aware that the element with the id has to be a direct child of the section, otherwise it won't work:

See the Pen zYeZmVw by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps.

Happy Tweening!

[Denny]

Sorry for the late reply.

Thank you so much.  it was solved.