DEV Community: Samuel Afolabi

Create Engaging Mouse Move Effects in React with GSAP: A Step-by-Step Guide

Samuel Afolabi — Wed, 20 Sep 2023 23:13:41 +0000

Prerequisites

This article was written with the assumption that the reader:

has basic knowledge of React and Javascript
is familiar with CSS, TailwindCSS, or any other CSS library.

What is GSAP?

GSAP is a powerful JavaScript library that helps you create smooth animations and transitions in your web projects. In our example, we'll use GSAP to make objects on the screen follow your mouse cursor.

Setting Up the Project

Before we dive into the code, make sure you have Node.js and npm (Node Package Manager) installed on your computer. If not, you can download and install them from the official website

Now, let's set up a new React project. Open your terminal and run the following commands:



npx create-react-app mouse-hover-effect
cd mouse-hover-effect
npm install gsap

We're creating a new React application called "mouse-hover-effect" and installing the GSAP library. Once that's done, you can open your project folder with a code editor.

If you intend to use Tailwind CSS for styling, follow this guide for installation. Feel free to use vanilla CSS or any other CSS framework or library of your choice.

Creating the App Component




const App = () => {
  return (
    <>
    <div className="min-h-screen bg-black">
      <div className="ball bg-yellow-500 w-4 h-4 fixed top-0 left-0 rounded-full"></div> 
      <div className="ball bg-yellow-500 w-4 h-4 fixed top-0 left-0 rounded-full"></div>  
      <div className="ball bg-yellow-500 w-4 h-4 fixed top-0 left-0 rounded-full"></div>  
      <div className="ball bg-yellow-500 w-4 h-4 fixed top-0 left-0 rounded-full"></div>  
      <div className="ball bg-yellow-500 w-4 h-4 fixed top-0 left-0 rounded-full"></div>
      <h2 className="text-center text-4xl font-bold text-blue-900">Mouse Hover Effect</h2>
    </div>
    </>
  );
};
export default App;

To see the app in action, start your development server with the following command:



npm start

Open your web browser and go to http://localhost:3000 You should see a black interface with five yellow balls stacked at the top-right of your screen. We also have a text heading that says "Mouse Hover Effect" at the center of the screen.

Let's Get Our Balls Moving




import React, { useEffect } from "react";
import { gsap } from "gsap";

const App = () => {
  useEffect(() => {
    gsap.set(".ball", { xPercent: -50, yPercent: -50 })
    let targets = gsap.utils.toArray(".ball");
    window.addEventListener("mousemove", (e) => {
      gsap.to(targets, {
        duration: 0.5,
        x: e.clientX,
        y: e.clientY,
        ease: "power1.out",
        overwrite: "auto",
        stagger: 0.02,
      });
    });
  }, 
[]
);

  return (
    <>
    <div className="min-h-screen bg-black">
    <div className="ball bg-yellow-500 w-4 h-4 fixed top-0 left-0 rounded-full"></div> 
      <div className="ball bg-yellow-500 w-4 h-4 fixed top-0 left-0 rounded-full"></div>  
      <div className="ball bg-yellow-500 w-4 h-4 fixed top-0 left-0 rounded-full"></div>  
      <div className="ball bg-yellow-500 w-4 h-4 fixed top-0 left-0 rounded-full"></div>  
      <div className="ball bg-yellow-500 w-4 h-4 fixed top-0 left-0 rounded-full"></div>
      <h2 className="text-center text-4xl font-bold text-blue-900">Mouse Hover Effect</h2>
    </div>
    </>
  );
};

export default App;

.set() is a GSAP method used to set initial properties for elements selected by the specified selector.

gsap.set(".ball", { xPercent: -50, yPercent: -50 }); centers all HTML elements with the class "ball" both horizontally and vertically within their parent containers by adjusting the xPercent and yPercent properties using GSAP. The selection of elements can also be done by using React's useRef hook to access DOM elements.

xPercent: -50 and YPercent: -50 properties specify the horizontal position and vertical position of the element as a percentage of its width and height, respectively.

gsap.utils.toArray(".ball") is used to select all HTML elements with the class "ball" and convert them into an array. This can be useful when you want to work with multiple elements that share the same class. The resulting array is assigned to the variable targets

gsap.to(targets, { ... }); uses GSAP's to method to animate one or more elements specified by the targets variable. The animation properties and values are defined within the object passed as the second argument.

x: e.clientX, y: e.clientYset the x and y properties of the animation. They are being animated to the current position of the mouse cursor.

ease: "power1.out" specifies the easing function for the animation. "power1.out" provides smooth acceleration and deceleration.
You can check out GreenSock Ease Visualizer to see and test other easing functions in GSAP

overwrite: "auto" controls how the animation behaves if multiple animations are triggered before the previous one completes. "Auto" means that GSAP will automatically handle overlapping animations, ensuring that the latest animation takes precedence.

stagger: 0.02 introduces a stagger effect, meaning that if you have multiple elements in your targets array, they will start their animations with a slight delay of 0.02 seconds between each element. This creates a cascading or staggered effect for the animations.

Food is Ready

We've just created a simple yet impressive mouse hover effect using React and GSAP. You can poke around, experiment, and give it your spice.

I hope you found this piece insightful and valuable. If you have any questions or thoughts to share, please do so in the comments. Thank you for reading!

Happy coding!

Connect Wallet to React dApp with ConnectKit

Samuel Afolabi — Tue, 27 Dec 2022 21:17:27 +0000

ConnectKit is a React library for connecting dApps to wallets. As at the time of writing this article, the v1.1.1 edges other competitors with typescript support, custom themes, and language translation.

This article was written with the assumption that the reader is familiar with css, javascript, react and blockchain rudimentary terms. Experience with ChakraUI is a plus.

Let's get to business🙂.

Create a react app - of course🥴

npx create-react-app hello-wallet

Install ConnectKit and its peer dependences

Co-dependencies for connection include wagmi and ethers , as connectKit uses both behind the scenes

npm install connectkit wagmi ethers

Create a client

I would suggest creating a separate js file for client creation to make the code cleaner. Let's name this file connectWeb3.js.
You'll need to generate one of Alchemy or Infura endpoint and key. These need to be provided to allow for walletConnect (an open source protocol that helps connect decentralised applications to mobile wallets with QR code scanning or deep linking)

ConnectKit also allows you to switch between networks seamlessly. You can do this by adding chains from wagmi. I am adding 4 chains here : Eth-mainnet, polygon, optimism and arbitrum.

connectWeb3.js

import { createClient } from "wagmi";
import { mainnet, polygon, optimism, arbitrum } from "wagmi/chains"; 
import { getDefaultClient } from "connectkit";

export const alchemyId = process.env.ALCHEMY_ID;
const chains = [mainnet, polygon, optimism, arbitrum];

export const client = createClient(
  getDefaultClient({
    appName: "hello-wallet",
    alchemyId,
    chains,
  })
);

Now that our client is set up, we move to the next step.

Wrap the App

Wrap the app with WagmiConfig from Wagmi and ConnectKitProvider from Conneckit. Since this is just a demonstration for this article, only one component - HelloWalletComponent - is included.

App.js

import { WagmiConfig } from "wagmi";
import { client } from "./connectWeb3";
import { ConnectKitProvider } from "connectkit";

function App() {
  return (
 <WagmiConfig client={client}>
       <ConnectKitProvider>
           <HelloWalletComponent/>
        </ConnectKitProvider >
</WagmiConfig>
);
export default App;

Let's go for the button 🎯

You can simply import the connect button and have it displayed like the image below this code block.

HelloWalletComponent.js

import { Box, Flex, Text, VStack } from "@chakra-ui/react";
import { ConnectKitButton } from "connectkit";


function HelloWalletComponent() {
  return (
    <Box>
      <Flex height="80vh" justifyContent="center" 
        alignItems="center">
        <VStack>
          <Text fontSize={{ base: "18vw", md: "12vw" }} 
            textAlign="center">
               GM <span> fren </span>
          </Text>
           //button here 👇🏽
          <ConnectKitButton />
          //button here 👆🏽
        </VStack>
      </Flex>
    </Box>
  );
}

Usually you would want the button matched up with your app theme. How then does one go about this? Let's have a walk through in the following sections.

Customization

There are quite a number of ways to do this. For brevity purpose, I'll discuss this just the way I think it's best. You can check out the Docs if you want to satisfy your curiosity.

ConnectKit provides a custom component - ConnectKitButton.Custom - that has render props for necessary wallet connection states. You can take advantage of this to build components like buttons, connection status signals, ens name / wallet address display or in fact make dynamic stylings.

The styling in the code block below takes the "sx" - ChakraUI's way of writing the style prop. That's why the styling is written as an object with cssv attributes in camel cases.

You can simply pass in the stylings with classNames, utility classes, or any form the react framework you use allows.

HelloWalletComponent.js

import { Box, Button, Flex, Text, VStack } from "@chakra-ui/react";

import { ConnectKitButton } from "connectkit";

function HelloWalletComponent() {

  const buttonStyle = {
    color: "black",
    fontSize: "2rem",
    border: "solid 2px black",
    padding: "2rem",
    fontFamily: "Bebas Neue",
    background: "transparent",
    fontWeight: "500",
    _hover: {
      border: "solid 1px black",
    },
  };

  return (
    <Box>
      <Flex height="80vh" justifyContent="center" alignItems="center">
        <VStack>
          <Text fontSize={{ base: "18vw", md: "12vw" }} textAlign="center">
               GM <span> fren </span>
          </Text>
           //button here 👇🏽
           <ConnectKitButton.Custom>
            {({
              isConnected,
              isConnecting,
              show,
              hide,
              address,
              truncatedAddress,
              ensName,
            }) => {
              return (
                <Button onClick={show} sx={buttonStyle}>
                  {isConnected ? truncatedAddress : "Connect wallet og"}
                </Button>
              );
            }}
          </ConnectKitButton.Custom>
          //button here 👆🏽
        </VStack>
      </Flex>
    </Box>
  );
}

It is important to mention that Connectkit provides you with custom themes, and ability to customize the theme and mode. You can override the styles of a theme by passing providing a customTheme prop to the ConnectKitProvider . You can modify styling variables for:

the whole ConnectKit System - just as the font-family, border-radius, and background are modified in the example below
Connect Wallet Button
Primary Buttons
Secondary Buttons
Tertiary Buttons
Modal
Texts and Miscellaneous

There is also an options prop that allows for more customizations. It is recommended that the embedGoogleFonts is set to true to ensure fonts appear correctly. Other options take mostly booleans and strings.

App.js

import { WagmiConfig } from "wagmi";
import { client } from "./connectWeb3";
import { ConnectKitProvider } from "connectkit";

function App() {
  return (
 <WagmiConfig client={client}>
       <ConnectKitProvider
          mode="light"
          customTheme={{
            "--ck-font-family": "Bebas Neue",
            "--ck-border-radius": "0px",
            "--ck-background": "#F0FFF3",
          }}
         options={{
            embedGoogleFonts: true,
            disclaimer: <> connect your wallet fren. Welcome to 
             Web3 </>,
            showBalance: true,
            hideQuestionMarkCTA: true,
          }}
>
           <HelloWalletComponent/>
        </ConnectKitProvider >
</WagmiConfig>
);

All the chains imported from wagmi are rendered as shown in the image below in the connectWeb3.js file
const chains = [mainnet, polygon, optimism, arbitrum];

That's all I have got in my tiny head for now fren. I would appreciate your suggestions, and other ways you have done this implementation.

Gm and Happy Hacking!