title: Animating child elements in ScrollTrigger GSAP horizontal scroll
body: <p>I have an <code>svg</code> which forms the basis of my <code>horizontal</code> scroller.</p>
  <p>Within this <code>svg</code>, I have added the class <code>.animate</code> to the elements which I want to fade in up as the item comes into view. The .animate class for reference has been added to all the text items in the <code>svg</code>.</p>
  <p>Currently, only the <code>.animate</code> elements that are in view initially fade in up. When I scroll down to continue the scroller, the other elements are static. They're not fading in or <code>translating</code> up or down in any way?</p>
  <p><strong>TL;DR, here is what I'm trying to achieve:</strong></p>
  <ul>
  <li>When the scroller pins in place, and the user continued to scroll down, start fading away <code>.horizontalScroller__intro</code>.</li>
  <li>Once <code>.horizontalScroller__intro</code> has faded away, start the horizontal scroll for <code>.horizontalScroller__items</code></li>
  <li>Any elements with the class of <code>.animate</code> in my scroller will fade in up to its original position.</li>
  </ul>
  <p><strong>Note</strong>: I understand SO rules and preferences to post code here. But, my demo's contain a length SVG, which I cannot post here as it exceeds SO's character limit.</p>
  <p><a href="https://codepen.io/amit_rai95/full/MWOKpop" rel="nofollow noreferrer">Here is a demo of my latest approach</a></p>
  <p>From the <a href="https://greensock.com/3-8/" rel="nofollow noreferrer">scrollTrigger docs</a>, <code>containerAnimation</code> is what helps achieve animations on horizontal scrollers, and is what I've tried to achieve.</p>
  <p>However, in my demo above, I have the following issues:</p>
  <ol>
  <li><code>.horizontalScroller__intro</code> doesn't show initially, when it should, and should fade out on scroll.</li>
  <li>The horizontal scroller doesn't work anymore</li>
  <li>The <code>.animate</code> elements that are in view, do not fade in up</li>
  </ol>
  <p>If I use <code>timeline</code> (see below snippet), then the intro fade out and scroller works. But, doesn't animate in the child elements, which is where I need <code>containerAnimation</code></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
  
    let container = document.querySelector(".horizontalScroller__items");
  
    let tl = gsap.timeline({
      scrollTrigger: {
        trigger: ".horizontalScroller",
        pin: ".horizontalScroller",
        anticipatePin: 1,
        scrub: true,
        invalidateOnRefresh: true,
        refreshPriority: 1,
        end: '+=4000px',
        markers: true,
      }
    });
  
    tl.to('.horizontalScroller__intro', {
      opacity: 0,
    })
  
    tl.to(container, {
      x: () =&gt; -(container.scrollWidth - document.documentElement.clientWidth) + "px",
      ease: "none",
    })
  
  });</code></pre>
  </div>
  </div>
  </p>
  <p>I'm struggling to find a way in which I can make the intro fade in, the scroller scroll horizontally, and the <code>.animate</code> elements to fade in, or fade in up.</p>
  <p><strong>Edit:</strong></p>
  <p><a href="https://stackoverflow.com/users/15273968/onkar-ruikar">@onkar ruikar</a>, see notes based on <a href="https://gerny.csb.app/gsapScrollTrigger.html" rel="nofollow noreferrer">your sandbox</a> below:</p>
  <ol>
  <li>When you scroll down and the comes into view, I want the initial <code>.animate</code> elements to scroll up into view (currently, once the text fade away, and then the horizontal scroller starts working, only then does the <code>.animate</code> that are suppose to be in view, fade in up</li>
  <li>After the initial <code>.animate</code> elements have loaded, the next <code>.animate</code> elements that are part of the scroller, they do not fade in up. They're static. As each <code>.animate</code> element comes into view, then it should fade in up (I think it's currently triggering once, for all the elements).</li>
  </ol>
  <p>See visual here:</p>
  <p><a href="https://i.stack.imgur.com/wHwef.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wHwef.gif" alt="enter image description here" /></a></p>
  <p>In the above gif, you can see the first two text blocks are hidden, as soon as they're in view, I want them to fade up. Then the 3rd and 4th text blocks are static, when they should fade up as the user scrolls to that section.</p>