how to get back only the timeline object from a class?

[harp]

This is the class:

 

// import $ from 'jquery';
// import gsap from 'greensock';

/*
*
* OBJECTIVE: Retrieve h1 tag from user and break h1 text value into chars
*            and then animate each char onto the screen.
*            *Make it robust/provide options*
*
*            Task:
*            1. retrieve h1 tag/dom element
*            2. place the chars into the h1 via a span tag
*
* */

class LetterAnimations{
    constructor(domElement){

        this.animateChars(domElement);

    }

    implementDomElement(domElement){

       let splitDomElement = domElement.textContent.split(''),
           span,
           spans = [];

       domElement.textContent = '';


       for(let i = 0; i < splitDomElement.length; i++){
               span = document.createElement('span');
               span.innerHTML = splitDomElement[i];
               span.className = 'char-heading-primary';
               span.id = 'span'+(i+1);
               domElement.appendChild(span);
               spans.push(span);
       };

       this.styleChars(spans);

       return spans;

    };

    styleChars(span){

        span[6].style.paddingRight = '2rem';
        span[9].style.paddingRight = '2rem';
        span[13].style.paddingRight = '2rem';

    };

    animateChars(domElement){

        let spans     = this.implementDomElement(domElement),
            tlLetters = new TimelineLite({});

        tlLetters.set(spans, {autoAlpha: 0, opacity: 0, y: 40})
            .staggerTo(spans, 1, {opacity: 1, autoAlpha: 1, y: 0, ease: Power4.easeInOut}, '.03')
            .staggerTo(spans, 1, {delay: .5, opacity: 0, autoAlpha: 0, y: -40, ease: Power4.easeInOut}, '.03')

        return {tlLetters};
    }
}


export default LetterAnimations;

I just want the tlLetters so I can call use it to add into my master timeline:

import LetterAnimation from './LetterAnimations';
import CaptionAnimation from './CaptionsAnimation';

class IntroAnimations{
    constructor(){

        this.masterTimeline();


    };

    masterTimeline(){

        let tlMaster   = new TimelineMax();

        let tlLetters  = new LetterAnimation(document.querySelector('.company-name'));
        let tlCaptions = new CaptionAnimation(document.querySelectorAll('.heading-skewY-from-bottom'));

        console.log(tlLetters);
        // tlMaster
        //     .add(tlLetters)
        //     .add(tlCaptions);

    }
};

export default IntroAnimations;

But its not working... how to get just the timeline - tlLetters and use it?
Thank you.

[OSUblake]

Classes aren't functions. You should be using "this" everywhere,  and returning "this" for method chaining. 

 

animateChars(domElement){
  const spans = this.implementDomElement(domElement);
  
  this.tlLetters = new TimelineLite({})
    .set(spans, {autoAlpha: 0, opacity: 0, y: 40})
    .staggerTo(spans, 1, {opacity: 1, autoAlpha: 1, y: 0, ease: Power4.easeInOut}, '.03')
    .staggerTo(spans, 1, {delay: .5, opacity: 0, autoAlpha: 0, y: -40, ease: Power4.easeInOut}, '.03')

  return this;
}

...

const tlLetters  = new LetterAnimation(document.querySelector('.company-name')).tlLetters;