title: Animate text at specific duration on scroll in image sequence using scrollmagic and gsap
body: <p>I have a scrollmagic scene that animates an image sequence on being triggered and as I scroll. What I am attempting to do is at specific parts of the image sequence (for eg., img 1 to 5 or img 10 to 15, or 50 to 75) I want to animate a text(step1, step 2 etc.) that appears and disappears. So far I haven't been able to figure out how to do it. I have included the jsfiddle of what I have so far. Any help would be appreciated.</p>
  <pre><code>document.addEventListener('DOMContentLoaded', function () {
      var controller = new ScrollMagic.Controller();
  
      var obj = { curImg: 0 };
  
      // create tween
      var tweenImg = new TimelineMax();
  
      var reverseImg = images.reverse()
  
      tweenImg.to(obj, 0.5,
          {
              curImg: reverseImg.length - 1,  // animate propery curImg to number of images
              roundProps: &quot;curImg&quot;,               // only integers so it can be used as an array index
              repeat: 0,                                  // repeat 3 times
              immediateRender: true,          // load first image automatically
              ease: Linear.easeNone,          // show every image the same amount of time
              onUpdate: function () {
                  $(&quot;#myimg&quot;).attr(&quot;src&quot;, reverseImg[obj.curImg]); // set the image source
                  console.log(obj.curImg)
                  if (obj.curImg === 1) {
                      $(&quot;.section-content&quot;).css(&quot;opacity&quot;, 0)
                      $(&quot;#step1&quot;).css(&quot;opacity&quot;, 1)
                  } else if (obj.curImg === 25) {
                      $(&quot;.section-content&quot;).css(&quot;opacity&quot;, 0)
                      $(&quot;#step2&quot;).css(&quot;opacity&quot;, 1)
                  }
              }
          }
      )
  
  
      var scene5 = new ScrollMagic.Scene({ triggerElement: &quot;#telescope&quot;, duration: 5000, triggerHook: 0 })
          .setTween(tweenImg)
          .on(&quot;enter&quot;, function (e) {
          })
          .setPin(&quot;#telescope&quot;)
          .addIndicators() // add indicators (requires plugin)
          .addTo(controller);
  
  
  
  });
  </code></pre>
  <p><a href="https://jsfiddle.net/diviseed/ax3g0zfb/2/" rel="nofollow noreferrer">https://jsfiddle.net/diviseed/ax3g0zfb/2/</a></p>