Jump to content
Search Community

Nuxt.js + ScrollTrigger start and end markers positioned incorrectly on load but work on resize and route return

strnr test
Moderator Tag

Recommended Posts

Hi all

 

I seem to completely stuck on what I hope is a trival mistake/issue on my behalf, but I cannot seem to resolve so any help would be greatly appreciated!

 

Some context... I am building a site with Nuxt 2 + GSAP and working on a simple scroll interaction on the home page. It can be broken into a few small steps to help illustrate the desired outcome:

  1. A full-page splash component (logo loading animation) is `positioned: fixed; z-index: -1;` at the top of the page
  2. The inner page content is then transformed down by `transform: translate3d(0, 100vh, 0)` and on close of the splash is transformed back up to simulate a parallax effect over the splash page
  3. Then, nested inside the inner page content there are three 100vh full-bleed image sticky sections (with nested headline etc) that have predefined `width: 100%'; height: 100vh; position: sticky; top: 0;` styles making them overlap on scroll. We are then using a scrollTrigger to animate the headline and images to show and reveal on scroll i.e. hide first image when next image reaches the top (and should probably be using pinning for the sticky sections?!).

 

My issue is that on first render/load the markers are positioned incorrectly and  then work perfectly on window resize or returning to route. I seem to have determined this due to the translate set on the parent container on load (when the splash is active). 

 

I have been able to reproduce the issue in a minimal Nuxt 2 + GSAP repo here:
https://stackblitz.com/edit/nuxt-starter-qp4xkc?file=pages/index.vue

 

From what I have read in other issues, calling `ScrollTrigger.refresh()` once we know the DOM is ready and/or when the splash transition is complete, should recalculate the scrollTriggers but testing refresh hasn't resolved the issue. Nesting the `ScrollTrigger.refresh()` inside a `setTimeout()` to wait for the splash transition to end works inconsistently and doesn't feel like a production safe solution? 

 

I have also tried changing the CSS on the parent i.e. pushing down the content down using padding or margins instead of translating but the issue persists. I know from experience that's always best to go all GSAP and not mix elements with CSS (i.e. the sticky panels) but I just can't seem to get it to work..


Hoping I just have some logic mixed up and would appreciate any guidance!

Link to comment
Share on other sites

Hi,

 

Since you're using a store for the splash window you should use a watcher in order to create the GSAP instances when that value in the state reflects that the splash window animation is complete. When that happens, there you can create the animations and ScrollTrigger instances.

 

Also  I understand that the gsap module makes your life easier but it is using an outdated version of GSAP (3.11.0). The latest version (3.11.4) includes a series of improvements and bug fixes that could help in this issue. Again, I understand that is super useful but since is not up-to-date with the latest version of GSAP, my recommendation is to not use it. If you want to keep using it we can't guarantee that you'll get the best results with it.

 

Also I keep seeing the "Animating Loader Logo" blinking. Shouldn't that stop at some point?

 

Finally for frameworks like Vue, React, Svelte, etc., we recommend using GSAP Context for better cleanup, scoping and other benefits, take a look:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Happy Tweening!

  • Like 1
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.
×
×
  • Create New...