Animating the modal opening with path transitions

[wbobeirne]

So I was running into some issues around transitioning from step to step cleanly while using beforeShowPromise, and I actually found that you can apply transitions to the modal's path element to have it animate between targets:

.shepherd-modal-overlay-container path {
  transition: all 0.3s ease;
}

results in

2022-03-02_12-58-45.mp4

Perhaps this should either be an option, added to the CSS by default, or maybe a cookbook entry? Either way, I thought it was cool and wanted to share.

[RobbieTheWagner]

Ohhhh, @wbobeirne this is very nice! I think we could include this in the default styles probably.

[lonix1]

The https://driverjs.com library does something like this, and it's very slick.

The above css is a good start, but doesn't work well on the first/last step, and for some transitions where the element is near the screen edges.

[RobbieTheWagner]

@chuckcarpenter can we look at including the above CSS and perhaps some additional tweaks per what @lonix1 said? Maybe if we know the first and last steps we can just not do the transitions there.