ayank007
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by 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.
-
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. -
Thanks man, I swear it wasn;t working on first try
-
17 hours ago, Rodrigo said:
Hi @ayank007 and welcome to the GreenSock forums!
This fork of the quickTo() example should help:
You can read more about it here:
https://greensock.com/docs/v3/GSAP/gsap.quickTo()
Hopefully that's enough to get you started. Let us know if you have more questions.
Happy Tweening!
Thanks,
The demo is working for just "elastic". What can I do to config like "elastic.out(1, 0.3)"? -
GSAP is not setting markers properly
in GSAP
Posted
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.