exportRoot QA

[tailbreezy]

var tl = gsap.timeline()
.to('.box', { x: 200})

console.log(gsap.globalTimeline.duration()) // ~1.281
 
console.log(gsap.exportRoot().duration()) // ~1.281

console.log(tl.duration()) // 0.5

I wonder where the extra 0.70-0.80s come from in exportRoot and globalTimeline.

See the Pen 638b1c9b5c499e1e455e8f7247943835?editors=1111 by dadacoded (@dadacoded) on CodePen

[ZachSaucier]

From my understanding, it comes from the time it takes things to initialize. The globalTimeline (and exportRoot) have to keep a timeline running all the time and place animations/timelines where they need to be on that timeline. 

[tailbreezy]

If that is true. It seems it gets initialized the moment the gsap script is loaded. Since setting timelines after load results in the same.
 

window.addEventListener('load', () => {

  var tl = gsap.timeline()
  .to('.box', { x: 200})

  console.log(gsap.globalTimeline.duration()) // ~1.281

  console.log(gsap.exportRoot().duration()) // ~1.281

  console.log(tl.duration()) // 0.5
  
})

 

[tailbreezy]

Yup.

 

window.addEventListener("load", () => {
  function loadScript(src) {
    return new Promise(function (resolve, reject) {
      var s;
      s = document.createElement("script");
      s.src = src;
      s.onload = resolve;
      s.onerror = reject;
      document.head.appendChild(s);
    });
  }

  loadScript("https://unpkg.co/gsap@3/dist/gsap.min.js").then(() => {
    var tl = gsap.timeline().to(".box", { x: 200 });

    console.log(gsap.globalTimeline.duration()); // 0.5

    console.log(gsap.exportRoot().duration()); // 0.5

    console.log(tl.duration()); // 0.5
  });
});