FrameAnimation does not created a paused timeline by default

[mirkovw]

So it doesn't matter whether we wait until fonts/images are loaded because the timeline plays instantly, regardless.

[mirkovw]

@mm-paulie what was the PR that fixed this? Just found this issue in Ana's project again, wondering when it got fixed

[mirkovw]

I checked that project with temple 6.2.2 and noticed the issue is still happening.. reopening this issue

[mm-paulie]

It first runs the init function async, then it creates the animation and pauses it by default? Can you show me an example project where this happens?
In main.js

const banner = new Banner(config);
//first load fonts, load images etc in the init animation
banner.init().then(
  () => {
    //initializes animation and creates main timeline
    banner.setAnimation(new Animation(document.querySelector('.banner'), config));
    //plays banner
    banner.start()
  }
)

In Banner.js

async init() {
    this.banner = document.body.querySelector('.banner');
    await politeLoadImages(this.banner)
    await this.loadFonts(); //need to wait until fonts are loaded. Otherwise we will run fitText on the wrong fonts

    const title = document.body.querySelector('.title');
    const ctaCopy = document.body.querySelector('.cta_copy');
    fitText([title, ctaCopy]);

    this.domMainExit = document.body.querySelector('.mainExit');

    this.domMainExit.addEventListener('click', this.handleClick);
    this.domMainExit.addEventListener('mouseover', this.handleRollOver);
    this.domMainExit.addEventListener('mouseout', this.handleRollOut);
  }  

setAnimation(animation){
    this.animation = animation;
    //creates new timeline and pauses it
    this.animation.getTimeline().paused(true);
    // this.animation.getTimeline().eventCallback('onComplete', this.handleAnimationComplete);
  }

So first it loads the images/fonts and when that is done it creates the animation and pauses it by default?