Neighborly Package Megalodon


    0.3.0 • Public • Published

    React Trip Animation

    Donate npm npm npm


    Check the demo.


    You can install react-trip-animation by executing this command:

    npm install --save react-trip-animation

    When the installation process ends, you are ready to import react-trip-animation to your project.

    How to Use

    To use react-trip-animation you have to import the component in your project:

    import { Destination, Journey, Origin, Trip } from 'react-trip-animation';
    /* Barcelona to Doha, Doha to Hanoi */
    const TripAnimation = () => (
          <Origin position={[41.3887901, 2.1589899]} />
          <Destination position={[25.286106, 51.534817]} />
          <Origin position={[25.286106, 51.534817]} />
          <Destination position={[21.028511, 105.804817]} />

    You can add more properties to react-trip-animation, see the list of available properties in Properties section.

    Trip Component Properties

    className (String)

    Default: ''

    The class name to wrap the Trip component.

    delayStart (Number milliseconds)

    Default: 0

    Defines time to wait before start the animation.

    fitWorld (Boolean)

    Default: false

    The animation will start with the map adjusted to the whole view of the world.

    flyDuration (number milliseconds)

    Default: 2000

    Defines the time spent to move between the different scenes (initial animation and the time between the different journeys animation).

    height (String)

    Default: '100%'

    Height size. It will override the size specified in the className prop.

    in (Boolean)

    Default: true

    This prop stops the inmediately starting. The animation will not start until in is true.

    mode (String: Trip.mode.ALL | Trip.mode.SEGMENT)

    Default: Trip.mode.ALL

    It defines the whole animation scene:

    • Trip.mode.ALL: The map view will fit to the bounds of all journeys and never will move.
    • Trip.mode.SEGMENT: The map view will fit to the bounds of the current segment.

    reset (Boolean)

    Default: true

    Allows to reset the animation on finish.

    tile (String)

    Default: 'https://{s}{z}/{x}/{y}{r}.png'

    Defines the map skin. It is based on the standard map tiles system. You can find your favourite here.

    width (String)

    Default: '100%'

    Width size. It will override the size specified in the className prop.

    Journey Component Properties

    cubicBezier (String)

    Default: '0.8 0.12 0.2 0.9'

    Describes the ease animation between the origin and destination. You can calculate it here.

    deep (Number)

    Default: 8

    Defines the curvature of the path between the origin and destination.

    delay (Number milliseconds)

    Default: 2000

    Allows to add a time before start the animation for the journey.

    duration (Number milliseconds)

    Default: 4000

    Defines the journey duration.

    ghostPathColor (String)

    Default: 'white'

    Defines the color of the ghost path.

    ghostPathDashArray (String)

    Default: '4,10'

    Defines the style of the ghost path (more info).

    ghostPathWeight (Number)

    Default: 2

    Defines the weight of the ghost path.

    keepPathOnFinish (Boolean)

    Default: true

    Allows to hide/show de path after finish the animation in the journey.

    pathColor (String)

    Default: 'red'

    Defines the color of the path.

    pathIcon (Image url|base64)

    Default: null

    Defines the icon that follows the path (plane icon for instance).

    pathIconSize (Number)

    Default: 40

    Defines the size of the icon.

    pathWeight (Number)

    Default: 3

    Defines the weight of the path.

    roundSide (String: Journey.roundSide.LEFT_ROUND | Journey.roundSide.RIGHT_ROUND)

    Default: null

    Allows to change the way of the curvature.

    showGhostPath (Boolean)

    Default: false

    Allows to show a ghost path between the origin and destination.

    Origin and Destination Component Properties

    markerAnchor (Array)

    Default: [],

    The anchor position to center the marker on the right point.

    markerIcon (Node|Element)

    Default: null

    A React element to set as marker.

    position (Array)


    The coordinates of the place to set as origin or destination. [lat, lng].


    • Anotations
    • Train journeys
    • Boat journeys


    npm i react-trip-animation

    DownloadsWeekly Downloads






    Unpacked Size

    5.1 MB

    Total Files


    Last publish


    • mschez