Next JS Preloader using GSAP not working as expected.

[amitsgh]

I am using NEXT JS 13 with 'app' dir, within it with the help of loader.tsx and page.tsx I'm trying to create a number % loading animation using gsap, but there is no rendering of data from loading.tsx file and I'm can't able to identify the problem with my code.

 

link to demo file - https://stackblitz.com/edit/stackblitz-starters-wlywtf?embed=1&file=app%2Floading.tsx

I want loading animation similar to this.

reference - DuallStudio . Creative Digital Studio  

page.tsx - 

export default async function Home() {

    await new Promise((resolve) => setTimeout(resolve, 3000));

   

    return (

        <main>

            <section className="flex justify-start">

                <span className="text-7xl relative">

                    Hello <br /> there <span className="absolute top">👋</span>

                </span>

            </section>

        </main>

    );

}

loading.tsx -

// Loading.js

'use client'

 

import { useEffect } from 'react';

import gsap from 'gsap';

 

const Loading = () => {

    useEffect(() => {

        const tl = gsap.timeline({ repeat: -1 });

        tl.to('.preloader', {

            width: '100%',

            duration: 1,

            ease: 'power1.inOut',

        }).to('.preloader', { width: '0%', duration: 1, ease: 'power1.inOut' });

    }, []);

 

    return (

        <div className="fixed flex justify-center items-center w-screen h-screen z-[1000]">

            <div className="preloader"></div>

        </div>

    );

};

 

export default Loading;

Edited November 14, 2023 by amitsgh
add stackblitz next js gsap demo

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

I see that you're using React - please read this article! It looks like you're not doing proper cleanup which is essential in React (it's a React thing, not GSAP). 
 

Here's a Next starter template you can fork.

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Side note: you can simplify this code: 

const tl = gsap.timeline({ repeat: -1 });
tl.to('.preloader', {
  width: '100%',
  duration: 1,
  ease: 'power1.inOut',
}).to('.preloader', { width: '0%', duration: 1, ease: 'power1.inOut' });

To this: 

gsap.fromTo('.preloader', {width: "0%"}, {
  width: '100%',
  duration: 1,
  ease: 'power1.inOut',
  repeat: -1,
  yoyo: true
});

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[amitsgh]

@GSAP Helper I have included the demo file of my project and the reference loading animation that I want to achieve.

[Rodrigo]

Hi,

 

Where exactly are you using your Loading component? At least in your demo you're not importing it and adding it anywhere in the layout or page files. My guess is that for some reason Next is defaulting to this component while that weird promise you have in your code is completed:

export default async function Home() {
  await new Promise((resolve) => setTimeout(resolve, 3000));
  
  return (
  	<div></div>
  );
}

Until that promise is not fulfilled, the JSX from the return statement is not rendered on the DOM, so that's why I'm guessing that you can actually see the component for those three seconds and then you see the page. But the animation doesn't run of course, since the component is never actually loaded, so my guess is that this is a server side rendered page being defaulted somehow (I'm not really an expert in this kind Next intricacies).

 

Here is a fork of your demo that seems to work the way you intend:

https://stackblitz.com/edit/stackblitz-starters-dqhyiw?file=app%2Floading.tsx,app%2Fpage.tsx

 

Finally it's be a good idea to have a look at the resources we have available in this page:

https://gsap.com/resources/React/

 

Hopefully this helps.

Happy Tweening!