Mekuri screenshot

Mekuri

Author Avatar Theme by Funtechinc
Updated: 11 May 2024
67 Stars

Page transition animation for React

Categories

Overview:

mekurimekurimekuri is a React package designed for page transition animations with wait and sync modes. It supports popstate and scroll restoration and allows users to customize animations on a per-component basis using the useMekuri hook. The package can be integrated with Next.js and Remix frameworks, and even with Next.js App Router, with a recommendation for stable operation to use Pages Router.

Features:

  • Wait and Sync Modes: Provides options for wait and sync modes for page transition animations.
  • Scroll Restoration: Supports scroll restoration when in popstate during page transitions.
  • Custom Animations: Customize animations per component using the useMekuri hook.
  • Framework Support: Compatible with frameworks such as Next.js and Remix.
  • Integration with Libraries: Can be integrated with libraries like GSAP for enhanced functionality.
  • MekuriContext: Offers a context to wrap components in, allowing the setting of triggers for content switches.
  • MekuriHooks: Includes various callbacks like onEnter, onLeave, onEveryLeave, etc., within the MekuriContext for added control.
  • MekuriFreezer Integration: Supports integration with Remix for smoother transitions.

Installation:

To install mekurimekurimekuri, you can follow these steps:

  1. Install the package via npm:

    npm install mekurimekurimekuri
    
  2. Import the necessary components in your React application:

    import { useMekuri, Mekuri, MekuriContext } from 'mekurimekurimekuri';
    
  3. Utilize the components and hooks as needed within your application for customized page transition animations.

Summary:

mekurimekurimekuri is a versatile React package that enhances page transition animations with its wait and sync modes, allowing for a seamless user experience. Its compatibility with frameworks like Next.js and Remix, along with integration possibilities with libraries such as GSAP, makes it a powerful tool for developers looking to create engaging transitions in their web applications.