Jump to content
Search Community

Market South

Members

  • Posts

    9

  • Joined

  • Last visited

 Content Type 

Everything posted by Market South

  1. Market South
    Hi, Thanks for the update. I have created a minimal demo demonstrating my query. In the example, you can see I have declared an array const called navigationin the layoutfile which I am passing on to the Navbarcomponent where the array is lopped as a menu link. In production, we need to get the dynamic array value from an API endpoint and pass it to the Navbar component. As in my previous comment, I cannot use the async function in the root layout to fetch the API response. Hope this demonstrates my query.
  2. Market South
    @Rodrigo thank you for sharing the example. It works perfectly when the content element is placed in the root layout as in your example with a fixed element placed outside of the content element. But in my case, I have to pass a dynamic array value from API to the NavBar component where it loops through them as menu links. I cannot use the asyncfunction that uses awaitin the root layout as it throws lots of errors. So as a workaround, I have declared the content element in the page component as in my query. Please correct me if I am wrong.
  3. Market South
    Hi there, I am working on a Next V13(using App Router) project and tried to use ScrollSmoother for smooth scrolling of the page. But unable to make it work. On checking the console, can see a warning of ScrollSmoother needs a valid content element. The screenshot is attached. We used ScrollSmoother on Next V12 which is working seamlessly. I followed the same coding standard on the new project. Due to the privacy concern of the project, I cannot create a CodePen example. Example coding as below to give an idea: app/layout.js 'use client' import './css/globals.css' import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; import { ScrollSmoother } from "gsap/dist/ScrollSmoother"; import { useRef, useEffect, useState } from "react"; export default function RootLayout({ children }) { gsap.registerPlugin(ScrollTrigger, ScrollSmoother); useEffect(() => { ScrollSmoother.create({ content: "#smooth-content", smooth: 3, effects: false, normalizeScroll: true, }); }, []); return ( <html lang="en-nz"> <body suppressHydrationWarning={true}> {children} </body> </html> ) } /app/page.js export default async function Home() { return ( <main className="tw-relative"> <NavBar navData={navData} /> {/* fixed element...*/} <div id="smooth-wrapper"> <div id="smooth-content"> {/* rest of code...*/} </div> </div> </main> ) } Any help would be appreciated.
  4. Market South
    You are a legend mate! Adding will-change:transform resolved the issue. Thank you for your time and effort, much appreciated
  5. Market South
    Hi Jack, Thanks for the update. I have removed all the CSS that are not relevant to this demo. And also there is no CSS transition applied to the elements at the moment. The issue is still up there. Chrome version: 106.0.5249.121 Edge version: 107.0.1418.26 We use Browser Stack for testing other browsers. Thanks in advance
  6. Market South
    Hi there, Thanks for the prompt update. I have created a minimal demo by forking the CodePen you have shared. Link to it is https://codepen.io/MSLDeveloper/pen/LYrGagR We tried in all the browsers, it is flickering on all of them. Hope this is helpful to direct me in right direction ?
  7. Market South
    Hi all, We have the Smooth Scroller implemented on a Gatsby site which is doing a wonderful job. I have the same issue of text flickering on scroll in the website https://jovial-fox-cfe5c4.netlify.app/. In the homepage if you start to scroll, in the section after the landing section you can see the white text in the red background flickers as you scroll. Below is the code: gsap.registerPlugin(ScrollTrigger, ScrollSmoother); gsap.config({ nullTargetWarn: false }); // clear console log warnings useEffect(() => { ScrollSmoother.create({ content: "#smooth-content", smooth: 2, effects: false, normalizeScroll: true, }); }, []); Any advise would be much appreciated. Thanks in advance.
  8. Market South
    Hi Jack, Thanks for the prompt answer, much appriciated. Placing the fixed element outside of smooth-wrapper resolved the issue and everything is working as expected.
  9. Market South
    Hi there, We are building a static site with Gatsby Home | Pilot Brands (pilot-brands-dev-git-master-nakedcreative.vercel.app) which is under development. We are using Smooth Scroller library on all the pages of the website which is working great. The website also has a sticky navbar with "position: fixed". The sticky bar will only be visible on scrolling from bottom to top of a page. Which was working as expected before using the library. The issue is after starting to use the Smooth scroller library, the navbar is not showing on scrolling back to top. On doing some research, noted that it is to do something with the fixed navbar, but I am not sure how to overcome this. Can someone please direct me in the correct way please, as this is the first time I am using the Smooth Scroller library. Thanks in advance.
×
×
  • Create New...