ScrollTrigger & Nuxt - Error on when component update

[Simon.Gioffredi]

Hi,

 

First of all, sorry for my english, I'm not an english native speaker.

 

I have an issue when I use ScrollTrigger and Nuxt.

https://codesandbox.io/s/scrolltrigger-nuxt-update-component-wlo2y

 

You can see the demo here.

When we reload, or come for the first time in the page, there is no problem.

But if you make Nuxt reload the component, you can see an error appear.

If you change the console.log, you can see the WebApp updates, and there is a bug who appear.
 

Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

 

The bug only appear when you pin the element.

 

I understand the problem, that's the trigger we pass to ScrollTrigger which isn't good, but I don't understand why.

 

Does anyone has an idea ?

 

Thx
 

[Cassie]

Hey there Simon.

So it seems to be pinning and logging out all the right stuff for me... Sorry, I know that's not hugely helpful.

What do you mean by - 'make Nuxt reload the component'

[Simon.Gioffredi]

Hi Cassie,

 

In the Nuxt lyfecicle, when you change something in your component, only the component "update".

When you arrive on the project, everything works fine, but when you update your component (for example, change the console.log), the component should update, and here, there is an error.

 

[OSUblake]

That sounds like a hot reloading issue. There's nothing GSAP can do about that.

[Simon.Gioffredi]

Hi,

 

Yeah, that's the problem, but in hr, my component element is already set. I don't understand what ScrollTrigger doesn't like here.

If I console.log my element, everything is fine, but ScrollTrigger doesn't recognize him.

[Simon.Gioffredi]

Ok, I get it.

The problem occurs when I use ScrollTrigger in the main component element.

 

I needed to had a container as a trigger.

[OSUblake]

Also noticed you importing like this.

import { ScrollTrigger } from "gsap/dist/ScrollTrigger.min.js";

 

You can simplify that by adding this to your nuxt.config.js file.

build: {
  transpile: [
    "gsap"
  ]
}

 

Now you should be able to import like this.

import { ScrollTrigger } from "gsap/ScrollTrigger";

 

[Simon.Gioffredi]

Oh yes.

I already transpile gsap, but yeah, I can do that import.

Thx

[Bukwild]

I was running into issues like this with HMR as well as in other cases where a change in props to a Vue component resulted in the component being destroyed and recreated.  What worked for me was to switch not use `pin: true`.  In other words, separate the trigger and the pin.  So my markup, now, is kind of like:

 

<div class='component'>
  <div class='pin'></div>
</div>