Indiana Jones like path animation

[hugomrazek]

Dear Vasturiano,

Is there a way to animate paths Indiana Jones style? An example of what I mean can be found here.
Provided example - random paths seems to sort of do it, but when I try to recreate the effect to be slower and in an controlled way, I am not succeeding.

Thanks in advance

[vasturiano]

@hugomrazek yes I believe that should be doable with the paths layer. It should just be a matter of calibrating the pathDashInitialGap and pathDashAnimateTime to get it just right.

And if you get to do it, please send an example, I'd love to see it. 😃

[hugomrazek]

I am really trying hard but I am starting to believe I am missing something 😄

What I was able to come up with is this: A rotating globe onto which a path segments are added. However, the segments of the path are popping into a view, I have trouble animating them.
pathDashInitialGap does not seem to do anything. I thought if I set pathDashInitialGap to 1 (i.e. whole line) and pathDashGap to 0 (i.e. no gap) it will get the job done. But it does not. Here is an example of what I achieved so far. I must be not seeing/not understanding correctly something. What am I missing?

import {useEffect, useRef, useState} from 'react';
import Globe, {GlobeMethods} from "react-globe.gl";

let points = [{
    lat: 35.6764,
    lng: 139.6500,
    altitude: 0.4
}, {
    lat: 50.0755,
    lng: 14.4378,
    altitude: 0.4
}, {
    lat: 59.9139,
    lng: 10.7522,
    altitude: 0.4
}]

const App = () => {
    const globeRef = useRef<GlobeMethods>();

    const [currPointIdx, setCurrPointIdx] = useState(0)
    const [pathPoints, setPathPoints] = useState<number[][][]>([[[]]])

    const handleInterval = () => {
        setCurrPointIdx((currPointIdx) => {
            if(currPointIdx === points.length - 1) return 0;
            else return currPointIdx + 1;
        })
    }

    useEffect(() => {
        const interval = setInterval(handleInterval, 2000)
        globeRef.current?.pointOfView(points[currPointIdx], 2000);
        setPathPoints( [[...points.slice(0, currPointIdx + 1).map(({ lat, lng }) => [ lat, lng, -1 ])]]);

        return () => { clearInterval(interval) }
    }, [ currPointIdx ])

    return (
        <Globe
            ref={globeRef}

            globeImageUrl="/globe.png"
            pathsData={pathPoints}
            pathColor={() => ['yellow', 'yellow']}
            pathDashLength={1}
            pathDashInitialGap={1}
            pathDashGap={0}
            pathPointAlt={0.01}
            pathStroke={5}
            pathTransitionDuration={0}
            pathDashAnimateTime={2000}
            backgroundColor={"black"}
        />
    )
};

export default App;