Spotlight transition

[Pizzaboi87]

I tried to change the transition (the duration especially) of the spotlight, but I'm not sure if it is even possible, or maybe I do something wrong, but it's not working.

`

    steps={steps}
    run={isRun}
    showSkipButton={true}
    showProgress={true}
    continuous={true}
    scrollToFirstStep={true}
    scrollOffset={200}
    spotlightPadding={5}
    disableOverlayClose={true}
    hideBackButton={true}
    hideCloseButton={true}
    stepIndex={stepIndex}
    callback={handleJoyrideCallback}
    locale={{ skip: "Pause the Tour" }}
    styles={{
      options: {
        primaryColor: "#71d37b",
        zIndex: 1000,
      },
      spotlight: {
        transitionDuration: "0.5s",
      },
    }}`

[gilbarbara]

Hey @Pizzaboi87

I was looking at the demo now and I couldn't see the transition at all.
Can you see it? Maybe it's there but isn't getting used.

[Pizzaboi87]

Hi @gilbarbara

Thank you for your answer. If I try to change it in the styles, it won't have any effect on the actual render. It remains the same:

<div class="react-joyride__spotlight" data-test-id="spotlight" style="border-radius: 4px; position: absolute; background-color: gray; height: 50px; left: 924px; opacity: 1; pointer-events: auto; top: 200px; transition: opacity 0.2s ease 0s; width: 127px;"></div>

[gilbarbara]

Hey @Pizzaboi87
I asked if you could see the animation at all in the demo because I can't see it.