Nuxt, Vuetify and GSAP ScrollTrigger - wrong start position

[gmilic 0 Likes (Newbie)]

Hi people,

 

Anybody have problem with Nuxt, Vuetify and ScrollTrigger - wrong start position for trigger?

Start is set to "top top" but with markers: true I see that start is above trigger div element with a value that depends on width of page. As trigger div element is positioned lower on page, gap is getting bigger.

 

Same code works fine in Vue.

 

Even most simple ScrollTriger example behaves same in Nuxt - start is above trigger element (if trigger div is in the middle of page, not top).

 

I think that this probelm have something to do with Nuxt server side rendering, but not sure.

 

I tried to wrap everything in  if (process.client) { ... } but no success.

 

Anybody have similar problems or idea?

 

Thanks,

gmilic

 

 

 

 

 

 

 

 

 

[CityLights 4 Likes (Newbie)]

I had a hard time understanding your question. As advised in the forum guidelines it's always a good idea to create a reproducible demo on Codepen. If you need Nuxt to demonstrate the issue you can use CodeSandbox

Checking process.client should not be necessary as long as your create your ScrollTriggers in the mounted hook. Also make sure to dispose of them by killing them in the beforeDestroyed hook to avoid any lingering instances.

[gmilic 0 Likes (Newbie)]

Thank you CityLight,

 

Sorry for this, I will create example in CodeSandbox (I was trying to make demo in CodePen, silly me)