How to return an object only and use it elsewhere


#1

How to return an object and use it within another class?
I’m using different classes to create different GSAP timelines and then connecting them to control/hold all other timelines within the IntroAnimations class by using a master timeline in there. But I can’t seem to use the object on its own… Here is the code:
To add the class LetterAnimations takes in an argument of a dom element to work with.
// 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
    
  •        3. animate chars
    
  • */

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({}),
        obj = {};

    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 obj.tl = tlLetters;
}

}

export default LetterAnimations;

I want to return and use the obj.tl only:

/*
*

  • OBJECTIVE:
  • A MASTER TIME-LINE WILL CONTROL/HOLD ALL OTHER TIME-LINES:
  • tlLetters FROM LETTERANIMATIONS.JS
  • tlCaptions FROM CAPTIONSANIMATION.JS
  • TASK
  • 1: CREATE MASTER TIME-LINE WITHIN A CLASS STRUCTURE
  • */

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;

How to fix this? Thank you.


#2

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.