Jump to content


Nuxt, Vuetify and GSAP ScrollTrigger - wrong start position

Moderator Tag

Recommended Posts

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?













Link to comment
Share on other sites

  • gmilic changed the title to Nuxt, Vuetify and GSAP ScrollTrigger - wrong start position

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.

  • Like 1
Link to comment
Share on other sites

Thank you CityLight,


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


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.