Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(animation): Configurable animation motions #78

Merged
merged 5 commits into from
Jan 7, 2023
Merged

Conversation

JoseLion
Copy link
Member

@JoseLion JoseLion commented Jan 5, 2023

This PR adds two new transition motion effects for the spotlight, making a total of 3:

  • bounce: Slides across steps with a bouncy spring effect (default, to keep backward compatibility).
  • fade: The spotlight fades in/out just like the tooltip component.
  • slide: Slides across the screen with a sober linear effect.

The motion is configurable globally for the whole tour in the props of <SpotlightTourProvider />, or more granularly, on each step configuration.

Aside from this feature, the changes on the PR allowed us to decouple the render and animation of the spotlight and the tooltip components, improving the performance and fixing issue #77.

This PR also adds important improvements to the ESLint configuration, the codebase perse, and the tests.

@JoseLion JoseLion self-assigned this Jan 5, 2023
Copy link

@CristhianMotoche CristhianMotoche left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @JoseLion Overall LGTM. I just left a suggestion and a question. Let me know if they make sense.

src/lib/SpotlightTour.context.ts Outdated Show resolved Hide resolved
src/lib/SpotlightTour.provider.tsx Outdated Show resolved Hide resolved
@@ -117,7 +123,7 @@ export const SpotlightTourProvider = React.forwardRef<SpotlightTour, SpotlightTo
? stop()
: renderStep(current + 1);
}
}, [renderStep, current, steps.length]);
}, [stop, renderStep, current, steps.length]);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just checking if step should also be added as dep?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, step is only in renderStep function scope 🙂

Copy link
Member

@sebas1208 sebas1208 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@JoseLion JoseLion merged commit 37efcbe into main Jan 7, 2023
@JoseLion JoseLion deleted the feat/motions branch January 7, 2023 00:32
This was referenced Feb 7, 2023
@github-actions
Copy link

🎉 This PR is included in version 2.1.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants