GRG

Hello and Merry Christmas, I am attempting to dynamically change the title color based on the title underlay. Ideally i would like the text to be white while there is the video or other element under and then have the title text be black when over the white background. I have tried many Iterations and help would be much appreciated. Thank You!

Thank you for the quick response! I assume that it would not be feasible to have SmoothScroll sidebar and then a normal scroll content section? - or vise-versa Thank you again

Here is a quick demo link: https://stackblitz.com/edit/nuxt-starter-8camca?file=app.vue Thank you for your help!

Hello I am trying to create a SmoothScroller content page that also has a SmoothScroller sidebar. So far in my tinkering, it seems that when SmoothScroller is initialized it creates one scroll element that is active on the whole page and limits all other instances. Smooth Scroller even seems to censor any other regular non-SmoothScroller scrolling element. Is it possible to create this? Thank You!

Thank you for your help. The solution was quite trivial and the problem actually seemed to stem from code I had already written on the page I was routing to. Here is the code to my ScrollSmoother component incase it helps anyone. <template> <div id="smooth-wrapper"> <div id="smooth-content"> <slot></slot> </div> </div> </template> <script setup lang="ts"> import { onMounted, onUnmounted, ref } from 'vue'; import { gsap } from 'gsap' import { ScrollTrigger } from 'gsap/ScrollTrigger' import { ScrollSmoother } from 'gsap/ScrollSmoother' // Initialize all GSAP plugins if (process.client) { gsap.registerPlugin(ScrollTrigger, ScrollSmoother) } const smoothy = ref() // Initialize the smooth scroll plugin onMounted(() => { smoothy.value = ScrollSmoother.create({ smooth: 1.25, // Seconds it takes to "catch up" to native scroll position effects: true, // Look for data-speed and data-lag attributes on elements and animate accordingly normalizeScroll: true }) }) onUnmounted(() => { smoothy.value.refresh(); // <- Easy Cleanup! }) </script>

Hi Everyone, Im new to Greensock and Nuxt3 and I am trying to implement SmoothScroller into a Nuxt3 site and I can not seem to get it to work when routing to a new page. Any help would be greatly appreciated. Thank You! Here is the code to my GSAP component <template> <div id="smooth-wrapper"> <div id="smooth-content"> <slot></slot> </div> </div> </template> <script setup lang="ts"> import { gsap } from 'gsap' import { ScrollTrigger } from 'gsap/ScrollTrigger' import { ScrollSmoother } from 'gsap/ScrollSmoother' const nuxtApp = useNuxtApp() const router = useRouter() // Initialize all GSAP plugins if (process.client) { gsap.registerPlugin(ScrollTrigger, ScrollSmoother) } // Initialize the smooth scroll plugin onBeforeMount(() => { ScrollSmoother.create({ smooth: 2, // Seconds it takes to "catch up" to native scroll position effects: true, // Look for data-speed and data-lag attributes on elements and animate accordingly }) }) onMounted(() => { ScrollSmoother.refresh() }) // Kill all scroll trigger instances before redirecting router.beforeEach(() => { ScrollSmoother.refresh() for (const i of ScrollTrigger.getAll()) i.kill() }) // Handle Suspense resolution (e. g., async pages) nuxtApp.hook('page:finish', () => { // Refresh the scroll trigger ScrollTrigger.refresh() // Refresh scroll smoother ScrollSmoother.refresh() }) </script>