imksmv

Hmm... you were right! BUT, it does not make any sense, because in this code: https://stackblitz.com/edit/stackblitz-starters-6siq23?file=app%2Fpage.tsx, it works es expected without registering the plugin...

Thank you for your help, Cassie! I have another question: So, in this code: https://stackblitz.com/edit/stackblitz-starters-s1l9cd?file=app%2Fpage.tsx, If I decide to use context to check the length of data, it shows 0, however there is a teen that gets executed on render after which I call console.log(context.data.length) which shows 0, but expected to show 1. I have tried implemented on button click using contextSafe, but it's the same result.

Okay, I see, thanks! Also I'm trying to animate the text one by one, but seems like the timeline does not work as it supposed to. So I put all the text in one place, and expected it to animate one by one on the middle. So - the first "p" element appears and then disappears, after that the second "p" element appears and then disappears and so on... But for some reason the timeline doesn't work in my case.

Here is the link to Stackblitz https://stackblitz.com/edit/stackblitz-starters-pvzygv?file=app%2Fglobals.css,tailwind.config.ts,README.md,app%2Flayout.tsx,app%2Fpage.tsx I'm using tailwind alongside, I've tried using "invisible" class on those "p" elements and autoAlpha, but with no success, the FOUS still remains. Also there is no sequence between those elements on appearance. They should appear one by one, but instead they appear all together immediately.

Can someone help, I'm trying to avoid the flesh of the text on the screen (FOUC). Also I'm trying to animate the text one by one, but seems like the timeline does not work as it supposed to. 'use client' import gsap from 'gsap-trial' import { useGSAP } from '@gsap/react' import { useRef } from 'react' import SplitText from 'gsap-trial/SplitText' gsap.registerPlugin(SplitText) export default function Page() { const container = useRef<HTMLElement | null>(null) const tl = useRef<GSAPTimeline | null>(null) useGSAP( () => { const titles = gsap.utils.toArray<Element>('p', container.current) titles.forEach(title => { const splitTitle = new SplitText(title) tl.current = gsap .timeline() .from( splitTitle.lines, { opacity: 0, y: 20, stagger: 0.02, autoAlpha: 0 }, '<' ) .to( splitTitle.lines, { opacity: 0, y: -20, stagger: 0.02, autoAlpha: 1 }, '<1' ) }) }, { scope: container } ) return ( <section ref={container} className='flex justify-center items-center h-screen' > <div className='text-2xl leading-[0px] invisible'> <p>My name is Illia</p> <p>I am a cool guy</p> <p>Great developer</p> <p>and a funny fellow</p> </div> </section> ) }

Hey there! I've been struggling to implement the same look like these guys have on their website - "cuberto.com", using GSAP and React and Tailwind. If someone experienced could give me a hint how they did the delayed transition on links within the menu that would be amazing.