strnr Posted January 23, 2023 Share Posted January 23, 2023 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: A full-page splash component (logo loading animation) is `positioned: fixed; z-index: -1;` at the top of the page 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 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 More sharing options...
Rodrigo Posted January 23, 2023 Share Posted January 23, 2023 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! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now