Glitchy header animation

[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.




*/

 

[GreenSock]

We can't really troubleshoot a live site, but my guess is that you've just got a LOT going on during the loading of the page and the browser is just getting overwhelmed with all the rendering tasks (unrelated to GSAP). You could set things up to wait until the document fires its "load" event, and THEN do your animations. 

 

If you still need help, please make sure you provide a minimal demo. Here's a Stackblitz that you can fork: https://stackblitz.com/edit/react-cxv92j

 

Good luck!