pqina / tick

⏱ A counter component to render different countdown styles with
MIT License
83 stars 8 forks source link

Resizing the browser causes counter to start infinitely #9

Closed aaronculp-droneup closed 3 months ago

aaronculp-droneup commented 3 months ago

I had a counter that initialized at 0, when I resize the browser or a user on iPhone scrolls left/right slightly the counter starts to count infinitely.

No errors in console on why this happens..

Here is my component: ` import React, { useRef, useEffect } from "react"; import Tick from "@pqina/flip"; import "@pqina/flip/dist/flip.min.css"; import './index.css';

export const Flipr = ({ value }) => { const divRef = useRef(); const tickRef = useRef();

useEffect(() => {
    const currDiv = divRef.current;

    Tick.DOM.create(currDiv, {
        value,
        didInit: (tick) => {
            tickRef.current = tick;
        },
        view: {
            children: [
                {
                    repeat: true,
                    root: "div",
                    style: ".flip",
                    transform: "step(1) -> arrive -> step(1)",
                    transition: "crossfade",
                    view: '',
                    children: [
                        {
                            view: "flip"
                        }
                    ]
                }
            ]
        }
    });

    return () => Tick.DOM.destroy(tickRef.current);
}, [value]);

useEffect(() => {
    if (tickRef.current) {
        tickRef.current.value = value;
    }
}, []);

return (
    <div>
        <div ref={divRef} />
    </div>
)

}; `

App.js:

`

`

package.json -- "@pqina/flip": "1.7.5",

aaronculp-droneup commented 3 months ago

only showing value=0 so show that no matter the value resizing the browser is root cause

aaronculp-droneup commented 3 months ago

fixed by updating transform: "step(1) -> arrive -> step(1)", to transform: "arrive(1, 1, false, true)",

rikschennink commented 3 months ago

@aaronculp-droneup sounds like it's fixed, I'll close the issue then.