Rhye template: class SectionList

class SectionList extends ScrollAnimation {
  _setAnimation() {
    gsap.set(this.$listImages, {
      opacity: 0,
      scale: 1.1,
      transformOrigin: 'center center'
    });

    /* === Add this === */
    SetText.setChars({
      target: this.$el.find('.split-text[data-split-text-set="chars"]'),
      autoAlpha: 1,
      y: '100%'
    });
  }

  _animate() {
    const self = this;

    self._createScene({
      element: this.$el
    });

    this.$listItems.each(function () {
      const
        $el = $(this),
        tl = new gsap.timeline(),
        $thumb = $el.find('.list-projects__cover img, .list-projects__thumbnail'),
        $heading = $el.find('.list-projects__heading'),
        offset = $thumb.is(':visible') ? '-=0.6' : '0';

      tl
        .to($thumb, {
          opacity: 1,
          scale: 1,
          duration: 1.2,
        })
        .add([
          gsap.effects.animateWords($heading, {
            duration: 0.9
          }),
          /* === Add this === */
          gsap.effects.animateChars($heading, {
            duration: 0.9,
            stagger: distributeByPosition({
              from: 'start',
              amount: 0.2
            }),
          }),
          gsap.effects.animateLines($el, {
            excludeEl: '.js-change-text-hover__hover .split-text__line',
          })
        ], offset);

      self._createScene({
        element: $el,
        timeline: tl,
        reveal: false
      });
    });
  }
}