Search the Community

I have splittext and somehow it changes the color of the typeface or the z-index, i don't know what exactly the problem is. useGSAP( () => { if ( !firstTextRef.current || !secondTextRef.current || !arrowRef.current || !boxRef.current ) return; const splitFirst = new SplitText(firstTextRef.current, { type: 'chars' }); const splitSecond = new SplitText(secondTextRef.current, { type: 'chars', }); gsap.set(splitSecond.chars, { y: 550, visibility: 'hidden' }); gsap.set(boxRef.current, { y: 100, autoAlpha: 0 }); // Set initial state const tl = gsap.timeline(); tl.from(splitFirst.chars, { y: 550, opacity: 0, stagger: 0.05, duration: 0.6, ease: 'circ.out', }) .from( arrowRef.current, { opacity: 0, scale: 0, duration: 0.4, ease: 'back.out(1.7)', }, '-=0.3' ) .to(boxRef.current, { y: 0, autoAlpha: 1, duration: 0.6, ease: 'circ.out', }) .to( splitSecond.chars, { y: 0, visibility: 'visible', stagger: 0.05, duration: 0.6, ease: 'circ.out', }, '-=0.3' ); }, { scope: containerRef } ); it might be because of the chaining or the timeline, i've tried working with z index in css and in gsap as well but nothing really works. is there a solution for this problem? gsap.mov

I'm recreating the first header animation from this example https://tympanus.net/Development/OnScrollTypographyAnimations/ in my own website, www.kasperborgbjerg.co ( client-rendered website built with react and vite). The issue is that the animation is choppy on render (this is only when it is first rendered) when the page loads. Sometimes the animation runs without the specified font style but rather picks the default one. What can cause this choppy outcome? /* Custom Animation Hook: - Activated during the component layout processing phase. - Consists of two primary functions: Function for Animating Title Text: - Targets main heading and paragraph text characters. - Uses a timeline-based animation library (GSAP) to create entrance animations. - These animations are applied directly to each character of the heading and paragraph texts. - Visual effects and timing patterns (stagger values) are specified for the animation. - The animation occurs within the component's visible area, affecting how text characters appear on screen. Function for Preparing and Executing Text Animations: - Identifies text elements needing special split-character animations based on HTML attributes ('data-splitting' and 'data-effect1'). - Applies a text manipulation library (Splitting) to these identified text elements. - This manipulation involves splitting text into individual characters, preparing them for subsequent animation. - Once text is split, the first function (animate titles) is invoked. - The invocation occurs within a 'requestAnimationFrame' call, ensuring it's synchronized with the browser's rendering cycle. - This entire process is conditional, based on the document's ready state or a specific component state being set (indicating component readiness). - Execution Context: - The execution of the preparation and animation function depends on whether the entire document is loaded or a particular state within the component is active. - Specifically, it checks for the complete loading of the document or the activation of an interactive feature within the component, as indicated by a state variable. - This ensures that animations only run when the component and its contents are fully ready to be manipulated and displayed. */