problem with horizontalLoop on component mount

[adamfard]

Hi everyone!

To create an infinite horizontal animation, I'm using horizontalLoop. However, it only runs on load, and I can't get it to work on component mount.

Where I get: 

Maximum call stack size exceeded

RangeError: Maximum call stack size exceeded
 

useIsomorphicLayoutEffect(() => {
            let ctx;
    
            // Animation initiation function
            const initiateAnimation = () => {
                ctx = gsap.context(() => {
                    const tl = horizontalLoop("img", {
                        repeat: -1,
                        paddingRight: 16,
                    });
                }, content);
            };
    
            // Directly call on component mount
            //initiateAnimation();
    
            // Setup for window load
            window.addEventListener("load", initiateAnimation);
    
            // Cleanup
            return () => {
                ctx && ctx.revert();
                window.removeEventListener("load", initiateAnimation);
            };
        }, []);

How can I initiate the animation upon component mounting?
This is important for when navigating away from the page and then returning.

Thanks

[Rodrigo]

Hi,

 

The problem is that due to the way these frameworks handle routing, the load event on the window object runs only once, that's why you're seeing this working only in the first run.

 

In order to work every time your component is mounted, you'll have to check for all the images to be loaded instead of using the window load event and create some state property or check method to know how many images have been loaded. When all the images are loaded or returned a loading error, then you'll be able to create your horizontal loop instance correctly.

 

Hopefully this helps.

Happy Tweening!