Having an issue in Scrolltrigger animation

[rafay06]

 

"use client";

 

import { useRef } from "react";

import gsap from "gsap";

import { useGSAP } from "@gsap/react";

import { ScrollTrigger } from "gsap/all";

 

// Register plugins

gsap.registerPlugin(ScrollTrigger, useGSAP);

 

const AnniverseryAnimationLargeScreen = () => {

  const container = useRef();

 

  useGSAP(

    () => {

      const tl = gsap.timeline({

        scrollTrigger: {

          trigger: ".number-container",

          markers: false,

          pin: true,

          start: "top 10%",

          end: "+=400%", 

          scrub: 1, 

        },

      });

      tl.to(".inside-number", {

        y: "-250%",

      });

      tl.to(".inside-number", {

        opacity: 0,

        duration: 0.3,

      });

 

      tl.to(".number-container", {

        

        scale: 16,

        duration: 4,

      });

     

    },

    { scope: container }

  );

 

  return (

    <section className="mt-4 hidden md:block">

      <div

        className="w-full mx-auto flex flex-col bg-black text-white"

        ref={container}

      >

        <div className="w-full  ">

          <ul className="number-container  w-1/2  font-normal mx-auto bg-transparent   text-[30vw] flex  justify-evenly items-center font-fragmentSans ">

            <h2>9</h2>

            <h2 className="relative ">

              0

              <p className="inside-number absolute text-sm lg:text-base right-1/2 translate-x-1/2 top-1/2 -translate-y-1/2 underline font-bold text-nowrap">

                Of Returning <br />

                Customer

              </p>

            </h2>

            <h2 className="relative text-transparent">

              %{" "}

              <span className="absolute left-0 bottom-[35%]  translate-y-1/2 font-serif text-9xl  text-white">

                %

              </span>

            </h2>

          </ul>

 

          <div className="  w-full ">

            <div className="textContainer flex flex-col justify-center items-center  pt-[900px] lg:pt-[800px] pb-[100px] mx-auto w-full p-4 gap-y-6 md:gap-y-12">

              <p className="text-base lg:text-xl font-light">

                Over 1500 Projects completed

              </p>

              <p className="flex flex-col items-start text-9xl">

                <span>FEATURED</span>

                <span>PROJECTS</span>

              </p>

            </div>

          </div>

        </div>

      </div>

    </section>

  );

};

 

export default AnniverseryAnimationLargeScreen;
 

Hey !

I'm creating an animation using React, Tailwind CSS, and GSAP. I'm facing an issue where the textContainer div appears too late while scrolling vertically. I want it to animate when the edge of the "0" digit (or element) almost touches the edge of the inner window (viewport). Can anyone help me fix this?

Also, is there any specific logic behind using the duration in ScrollTrigger? Sometimes it affects the animation, and other times it doesn’t seem to do anything.

Thanks!

I have also attached the animation I want to acheive.

 

 

 

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates 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 dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

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. 

 

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

[mvaneijgen]

While also emphasizing the need for a minimal demo.

 

I would make the text div also part of your animation, eg instead of scrolling the div just move it up on the y-axis. Most of the ScrollTrigger effects you see are just moving things on the y-axis instead of scrolling them, then hooking that animation to ScrollTrigger will give the illusion of scrolling, but they are really just animating! Getting to grips with this knowledge will make it so much easier to create all kinds of effects!

 

 

About the duration in ScrollTrigger, they do matter, but work a bit differently, see: normally in GSAP things work with durations, but when working with ScrollTrigger these durations get converted to distance. It might be hard to wrap your head around, but maybe this example helps. 

 

Let's say we have four tweens that all take 1 second to animate and the total ScrollTrigger distance is 400px each tween will then take up 100px. If we remove one tween and make the last tween take 2 seconds the first two tweens will take still 100px, but the last tween will get stretched over the remaining 200px.

 

 

Also if you want to use percent values in your x or y property use xPercent or yPercent, that is what they are for.

 

Hope it helps and happy tweening! 

  
Looking forward to your minimal demo, so that we can take a look at your code in action!

 

 

 

[Rodrigo]

Hi,

 

Also is important in these type of sequences to know how to position Tweens inside timelines in order to create the kind of overlap you're looking for:

https://gsap.com/docs/v3/GSAP/Timeline#positioning-animations-in-a-timeline

 

Happy Tweening!

[rafay06]

The issue is with the src/app/page.tsx file. There is a component fetching data from the server. I have created a sample component for that and added a 1 second delay to simulate loading.
Below that component is the actual animation component. That dynamic component causes the animation component to disturb. If I move that component below the animation component, the animation works fine, but that component is meant to display on top of the animation component.
I have tried things like putting the animation component inside the isLoading condition but that also doesn't work at all.

 

Code:
https://codesandbox.io/p/github/Abulkalam-Asif/test/main?import=true

[Rodrigo]

Hi,

 

There is a lot of code in your demo and we don't have the time resources to go through all that in order to find what could be the issue, that's why we ask for minimal demos (emphasis on minimal).

 

What you can try is pass some prop or use a state management solution such as React Context, Redux, Zustand, etc. in order to listen to those updates in the component with the animation, then you can use that as a dependency on the useGSAP hook and try using the revertOnUpdate config option in order to recreate the animation again when that prop is updated:

https://gsap.com/resources/React/#config-object

 

Also in ScrollTrigger you can use the invalidateOnRefresh config option as well:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#invalidateOnRefresh

 

Hopefully this helps

Happy Tweening!