GSAP with JSON problem.. I think

[Osh]

So I am working "exclusive edition" on my assignment 😅🦹‍♂️ 

 

When I comment out <img> I can see perfect animation on headers and buttons. But when I comment it back it shows nothing animation. Can it be from json, that it is too heavy to load every image? I don't know if this is off topic but I don't understand why it doesn't animate. I tried to animate boxes as well 😕 but it didn't work.

 

Maybe I shouldn't call axios? Maybe axios made too complicated with GSAP? I don't know, I just guessing. 

 

Btw. I made it in Vue 2. so I don't know how to change in CodePen from html to .vue component. 

 

 

😓 ...

See the Pen LYywxVM by RQOrch (@RQOrch) on CodePen

[OSUblake]

CodePen has a Vue editor.

 

 

But you might be bettor off using CodeSandbox.

 

And since you're loading data, you might need to wait for it, like using a watcher.

watch: {
  makeups() {
    this.$nextTick(() => this.animation());
  }
}

 

But it would be easier to help you out with a working demo.