kulesteIByen

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. */

to close this one off the issue with the uselayouteffect that was called twice was easily solved by implementing a toggle that was set to false after the first render. besides being called twice, the animation was also hesitant, this was due to a sibling component loading too heavy gltf models, interfering with the header animation.

This is the most recent update on the issue I'm working with some gsap header animations (https://tympanus.net/Development/OnScrollTypographyAnimations/) to make a banger first impression to my own website. This first impression is not that great though whent the header animation im referring to is flickering upon page load. The animaiton is triggered at two occasions: when the page is first loaded, and when a lamp canvas object is clicked. In the second case the animation runs perfectly. At first i thought the flickering was due to the useLayoutEffect (React) being called twice upon page load. I discovered though that this wasn't the problem after i resolved the clutter of calling the animation function twice (it't btw the same animaiton function that runs upon page load and upon lamp canvas click). I've tested multiple browsers (chrome, safari, firefox, brave) and all displays the same behavior. What the heck could be causing this problem when the method is only called once? Any knowledgeable gsap animators or coders in general that could spot out the issue, thank you! Video demonstrating the issue: https://vimeo.com/847639730?share=copy Codesandbox: https://codesandbox.io/p/github/Kibmeister/kbportfolio/main?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clkgu9zj9000h3b6m7aono4p5%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clkgu9zj9000c3b6mqkbknf48%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clkgu9zj9000g3b6m28qocf4s%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clkgu9zj9000e3b6m2mw6pjwy%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50.61847035959327%252C49.38152964040673%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clkgu9zj9000c3b6mqkbknf48%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clkgu9zj8000b3b6m1cg1sso0%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fpostcss.config.cjs%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clkgu9zj9000c3b6mqkbknf48%2522%252C%2522activeTabId%2522%253A%2522clkgu9zj8000b3b6m1cg1sso0%2522%257D%252C%2522clkgu9zj9000e3b6m2mw6pjwy%2522%253A%257B%2522id%2522%253A%2522clkgu9zj9000e3b6m2mw6pjwy%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A5173%252C%2522id%2522%253A%2522clkguabxe00yk3b6m27jazep6%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clkguabxe00yk3b6m27jazep6%2522%257D%252C%2522clkgu9zj9000g3b6m28qocf4s%2522%253A%257B%2522id%2522%253A%2522clkgu9zj9000g3b6m28qocf4s%2522%252C%2522activeTabId%2522%253A%2522clkgua97i00mu3b6m440r4fcd%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clkgu9zj9000f3b6m0ys5fxbu%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TERMINAL%2522%252C%2522shellId%2522%253A%2522clkgu9zn70052gyigeqb5dnol%2522%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522id%2522%253A%2522clkgua97i00mu3b6m440r4fcd%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

thank you for feedback gsap helper, but could the problem be due to some other gsap animation glitch. I wrapped the animation code with the gsap.context() without any success. The animation on page load is still hesitant and gibberish, and as you mentioned this is likely to be due to the animation being ran twice upon page load

As i'm building my portfolio website i've implemented a gsap animation for the hero header and the caption. watch the video below. I think the animation might be running twice upon initial render. I've tried everything to solve this issue. As you can see in the video, the animation runs smoothly when i toggle the lamp, it's only upon initial render that it looks rubbish. I've done enough debugging for some time as there are other facets of the website that need my attention. video I appreciate any serious answer that helps me solve this issue.