[Importing Plugins in Nuxt.js]

On 8/10/2018 at 3:34 AM, OSUblake said:

Most of the problems people are having with nuxt is that it does Server Side Rendering (SSR), so client side scripts like GSAP may not run correctly. I think you have to setup your project as a Single Page Application, put client side scripts in the head, or create a vendor bundle.

 

https://nuxtjs.org/api/configuration-build#vendor

 

 

It is not about SSR – I struggle with a SPA. I tried referencing the scripts in nuxt.config.js as vendor scripts, like suggested. Not working.
Putting them in the head is what microeinhundert already suggested as a workaround on July 11. It is the solution I'm using.

[Importing Plugins in Nuxt.js]

Interesting. This is not working for me. If I take the regular bonus files I get warnings about missing dependencies in my console. With the npm bonus files, the imports are not working of course.
EDIT: 
Got it now. It's working when not using the npm packages at all - I was still importing TweenMax from node_modules. Now I have also the TweenMax-Script in the header.
 

script: [
  { src: 'gsap/TweenMax.min.js' },
  { src: 'gsap/MorphSVGPlugin.min.js' },
  { src: 'gsap/SplitText.min.js' },
  { src: 'gsap/DrawSVGPlugin.min.js' },
  { src: 'gsap/GSDevTools.min.js' }
]

 

[Importing Plugins in Nuxt.js]

Thank you very much @microeinhundert! This was just too easy ?

[Importing Plugins in Nuxt.js]

Yes, I use the downloaded files.

The question is very nuxt specific. I hoped for an answer from @microeinhundert. A reduced test case doesn't make much sense here. Take a vanilla Nuxt, then try to get more than one bonus plugin working ?

[Importing Plugins in Nuxt.js]

May I ask how to import several gsap plugins that way? I have problems getting MorphSVGPlugin, SplitText and DrawSVGPlugin running together in Nuxt. I tried to do some research on config.entry.app.push(), without much success - I am a beginner with Nuxt.

[Looping Master or Scene and restoring original position of elements]

Thank you so much for your help!

[Looping Master or Scene and restoring original position of elements]

I try to loop a complete header animation endlessly, but I just cannot get it to work.

I tried to loop the master like this: 

    var master = new TimelineMax({repeat:-1});

Then I tried the same solution on the single scene I'm using:

      function sceneOne() {
        var tl = new TimelineMax({repeat:-1});

I also tried several solutions with **oncomplete callbacks**.

I finally had some experiments with

    timeline.seek(0).pause();
    timeline.pause(0); //shortcut for the line above
    timeline.progress(0).pause();
    timeline.totalProgress(0).pause();
    timeline.restart(0).pause();

inside my scene. Didn't help.

Can somebody point me in the right direction? I cannot find any error in my code. It's my first animation with GSAP and SVG ever, so I feel like overlooking something obvious. Any hint would be much appreciated!

See the Pen jwXGqd by Sixl (@Sixl) on CodePen