search

uixmat / onborda

An onboarding wizard flow / product tour for Next.js animated by framer motion
https://onborda.dev
879 stars 32 forks source link

Wrong step after navigating back. Incorrect positioning after navigating forward #4

Closed jahirfiquitiva closed 3 months ago

jahirfiquitiva commented 5 months ago

I'm not sure if this could be improved but I noticed a weird behavior in the demo website

  1. When navigating back, it highlights the first step always, then move to the last step in that route.
  2. When navigating forward, as the site was scrolled in the first page, then it will need scrolling up to position the step correctly

Pretty cool project nonetheless 🙌

https://github.com/uixmat/onborda/assets/10360816/c7f3b615-57af-40b4-89c0-7dd43540fa73

uixmat commented 3 months ago

@jahirfiquitiva i've just released v1.2.3 which now supports both cardTransition prop for the Onborda component allowing you to use framer-motion transitions for the card. eg. 

<OnbordaProvider>
  <Onborda
    steps={steps}
    cardComponent={TourCard}
    shadowOpacity="0.8"
    cardTransition={{ type: "spring", delay: 1 }}
  >
    {children}
  </Onborda>
</OnbordaProvider>

This allows you to have full control of the animation between steps including using orchestration methods such as delay

I have also updated routing to use the MutationObserver meaning the nextStep function wont be triggered until the target element has been rendered on the DOM.

Should fix the problem with your routing! Happy Onbording! 🎉