Search the Community
Showing results for tags 'nuxtjs'.
Found 2 results
-
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! -
Hi guys, I attach a codesandbox with the result I would like to achieve with gsap (but smoother). https://codesandbox.io/p/sandbox/charming-leaf-o1w7xb?file=%2Fpages%2Findex.vue&selection=[{"endColumn"%3A1%2C"endLineNumber"%3A57%2C"startColumn"%3A1%2C"startLineNumber"%3A1}]&workspace=%7B%22activeFileId%22%3A%22cl9zkslmo000hlsgzg75u0gum%22%2C%22openFiles%22%3A%5B%22%2Fpages%2Findex.vue%22%5D%2C%22sidebarPanel%22%3A%22EXPLORER%22%2C%22gitSidebarPanel%22%3A%22COMMIT%22%2C%22spaces%22%3A%7B%22clbdl1aza00103b6g4eqbzi2v%22%3A%7B%22key%22%3A%22clbdl1aza00103b6g4eqbzi2v%22%2C%22name%22%3A%22Default%22%2C%22devtools%22%3A%5B%7B%22type%22%3A%22PREVIEW%22%2C%22taskId%22%3A%22dev%22%2C%22port%22%3A3000%2C%22key%22%3A%22clbdl1aza00113b6gctyx602v%22%2C%22isMinimized%22%3Afalse%7D%5D%7D%7D%2C%22currentSpace%22%3A%22clbdl1aza00103b6g4eqbzi2v%22%2C%22spacesOrder%22%3A%5B%22clbdl1aza00103b6g4eqbzi2v%22%5D%7D is it possible to apply this type of animation to the transition component? What I would like to achieve is an animation that comes from top to bottom and with a fade-in effect (I'm using @nuxt/gsap). Thanks to anyone who can help me!
