Instance does not start

[chrisvidal]

Having a lot of issue with the lib. Some instance do not start, it is quite random.

I have code like

        const scalingBlock = document.querySelectorAll(".scale-block");

        for (var i = 0; i < scalingBlock.length; i++) {
            let start =
                scalingBlock[i].getBoundingClientRect().top +
                window.scrollY -
                windowHeight +
                70;
            let finish =
                scalingBlock[i].getBoundingClientRect().top +
                window.scrollY -
                windowHeight +
                170;

            let instance = basicScroll.create({
                elem: scalingBlock[i],
                from: start,
                to: finish,
                direct: true,
                props: {
                    "--scale": {
                        from: "0",
                        to: "1",
                    },
                    "--opacity": {
                        from: ".01",
                        to: ".99",
                    },
                },
            });
            instances.push(instance);

 const init = () => {
        for (let instance of instances) {
            instance.start();
        }
    };

and only the first DOM element with the cs class scale-block is animated.

what could be causing the issue?

[chrisvidal]

when I check the values given by percentage in the outside callback, it returns -Infinity

[chrisvidal]

my code creates about 20 basicScroll instances. Some are starting, some are not. No error, and no idea what is going on. What could be basisScroll sensitive to?

[electerious]

The code itself looks fine. Maybe the elements / some elements are hidden or not rendered and scalingBlock[i].getBoundingClientRect() returns invalid positions?

[chrisvidal]

I figured it out. In my page, there are dynamic sections that are build after the basicScroll instances were created, which mixed up all the positionning.