GSAP is not setting markers properly

[ayank007]

I am building react project with GSAP.
I am trying to create an animated div that will scale up based on scroll.

My animation works perfectly on codepen demo.

But when implementing it in my project, it sets the markers wrongly.

But when I change routes, and come back, the markers automatically get set perfectly.
Please watch the video for better understanding, or go to this link https://ayank007.github.io/newportfolio/#

Source code: https://github.com/ayank007/newportfolio/blob/master/src/components/Work/index.tsx in line 37

Can anyone please help me, what went wrong. Thank you.

See the Pen YzOVKez by ayank007 (@ayank007) on CodePen

[Rodrigo]

Hi,

 

Unfortunately we don't have the time resources to comb through an entire repo in order to find an issue. In the same way a video doesn't tell us exactly what could be the problem.

 

For what I saw in the file you point in your repo though, is that you're not using GSAP Context in your app. We strongly recommend using GSAP Context in react environments:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Also you don't have to register plugins in every file you use them, just import and register the plugins in your main entry file main.tsx in this case:

import React from 'react'
import ReactDOM from 'react-dom/client'
// import App from './App'
import MyRouter from './Router'
import './index.css'
import { LangCtxProvider } from "./context/language"

import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

import Cursor from './utils/cursor'

gsap.registerPlugin(ScrollTrigger);

setTimeout(() => {
  ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
    <React.StrictMode>
      <LangCtxProvider>
        <Cursor />
        <MyRouter />
      </LangCtxProvider>
    </React.StrictMode>
  )
},800)

 

If you want to register the plugin in an individual file, you don't have to register them in the effect hooks, just do that outside the scope of the component's function:

import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

const MyComponent = () => {
  useLayoutEffect(() => {
    const ctx = gsap.context(() => {});
    return () => ctx.revert();
  }, []);
};

export default MyComponent;

Finally take a look at the resources in this page in order to get a better grasp about using GSAP in react apps/environments:

 

Hopefully this helps.

Happy Tweening!

[ayank007]

16 hours ago, Rodrigo said:

Hi,

 

Unfortunately we don't have the time resources to comb through an entire repo in order to find an issue. In the same way a video doesn't tell us exactly what could be the problem.

 

For what I saw in the file you point in your repo though, is that you're not using GSAP Context in your app. We strongly recommend using GSAP Context in react environments:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Also you don't have to register plugins in every file you use them, just import and register the plugins in your main entry file main.tsx in this case:

import React from 'react'
import ReactDOM from 'react-dom/client'
// import App from './App'
import MyRouter from './Router'
import './index.css'
import { LangCtxProvider } from "./context/language"

import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

import Cursor from './utils/cursor'

gsap.registerPlugin(ScrollTrigger);

setTimeout(() => {
  ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
    <React.StrictMode>
      <LangCtxProvider>
        <Cursor />
        <MyRouter />
      </LangCtxProvider>
    </React.StrictMode>
  )
},800)

 

 

If you want to register the plugin in an individual file, you don't have to register them in the effect hooks, just do that outside the scope of the component's function:

import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

const MyComponent = () => {
  useLayoutEffect(() => {
    const ctx = gsap.context(() => {});
    return () => ctx.revert();
  }, []);
};

export default MyComponent;

 

Finally take a look at the resources in this page in order to get a better grasp about using GSAP in react apps/environments:

 

Hopefully this helps.

Happy Tweening!

Thanks for the tip, let me try to be more specific one more time.
You can see the markers "start" and "end", are not vertically aligned with the component I am applying animation to.
Thus the component suddenly shift to some pixel bottom, before starting the animation.

But when I change route couple of time, the markers automatically get aliened perfectly.
In the codepen demo, It works perfectly.

Hope you got my problem.

[Rodrigo]

Hi,

 

This is not about the description of the issue you are presenting, that was pretty clear from your first post , the problem is that we're not seeing any editable code and we don't have time to go through an entire repo.

 

As I mentioned before you're not using GSAP Context, which is especially needed when using from instances as explained here:

 

What you can do is fork this starter template to create a minimal demo (remember to keep it simple, no need to copy your entire project, just something that clearly demonstrates the issue):

https://stackblitz.com/edit/gsap-react-basic-f48716

 

Another reason for this could be the fact that you're lazy loading some images which is throwing off ScrollTrigger calculations or that you're loading images after the load event is triggered. But those are just guesses, if you don't illustrate the problem for us in a minimal editable demo, there is not much we can do, besides guessing.

 

Happy Tweening!

[ayank007]

4 hours ago, Rodrigo said:

Hi,

 

This is not about the description of the issue you are presenting, that was pretty clear from your first post , the problem is that we're not seeing any editable code and we don't have time to go through an entire repo.

 

As I mentioned before you're not using GSAP Context, which is especially needed when using from instances as explained here:

 

What you can do is fork this starter template to create a minimal demo (remember to keep it simple, no need to copy your entire project, just something that clearly demonstrates the issue):

https://stackblitz.com/edit/gsap-react-basic-f48716

 

Another reason for this could be the fact that you're lazy loading some images which is throwing off ScrollTrigger calculations or that you're loading images after the load event is triggered. But those are just guesses, if you don't illustrate the problem for us in a minimal editable demo, there is not much we can do, besides guessing.

 

Happy Tweening!

Thanks again. Actually I tried for a demo, but the demo is working fine. And as you suggest, I will try it with GSAP Context. I hope it will work then.