The animation onClick or onHover event does not works

[DomV-cloud]

I would like to use UseAnimation and icons as well. But animations are played only for non-click or non-hover icons (like activity etc..)

I followed steps for installations.

import React from "react";
import UseAnimations from "react-useanimations";
import github from 'react-useanimations/lib/github';

const App = () => (
  <UseAnimations animation={github} size={56} />
);

So my code looks like this:

import UseAnimations from "react-useanimations";
import menu2 from 'react-useanimations/lib/menu2';

export default function MobileMenu() {
  return (
   
            <UseAnimations
                animation={menu2}
                size={56}
                strokeColor="#B1986B"
                onClick={() => {
                   console.log("icon is clicked");
                  }}
            />
    
  )
}

[GoodboyBadvibes]

I have the same issue too, I'm not sure it ever works 😂

[KalinduGunathilake]

Same issue here. Autoplay works when the page loads, but doesn't get animated onHover or onClick like on their website. Anyone who knows how to manually trigger the animations onClick and onHover?

[ngocla99]

I tested it on CodeSandbox and it appears to work fine with React 16:
🔗 https://codesandbox.io/p/sandbox/wonderful-architecture-9prk6

However, it doesn't seem to work in React 19.

As an alternative, you can use the lottie-react package, which works well with modern React versions.

Example using lottie-react with a toggleable password input:

import * as React from 'react'
import Lottie from 'lottie-react'
import visibility from '@/assets/lotties/eye/visibility-V3.json'
import { cn } from '@/lib/utils'
import { Button } from './ui/button'

type PasswordInputProps = Omit<
  React.InputHTMLAttributes<HTMLInputElement>,
  'type'
>

const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
  ({ className, disabled, ...props }, ref) => {
    const [showPassword, setShowPassword] = React.useState(false)
    const lottieRef = React.useRef<any>(null)

    const handleTogglePassword = () => {
      setShowPassword(prev => !prev)
      if (lottieRef.current) {
        // Play forward if hiding password, play reverse if showing
        if (!showPassword) {
          lottieRef.current.playSegments([17, 0], true)
        } else {
          lottieRef.current.playSegments([0, 17], true)
        }
      }
    }

    const handleLottieLoad = () => {
      if (lottieRef.current) {
        lottieRef.current.playSegments([0, 17], true)
      }
    }

    return (
      <div className={cn('relative rounded-md', className)}>
        <input
          type={showPassword ? 'text' : 'password'}
          className='border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-1 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50'
          ref={ref}
          disabled={disabled}
          {...props}
        />
        <Button
          type='button'
          size='icon'
          variant='ghost'
          disabled={disabled}
          className='text-muted-foreground absolute top-1/2 right-1 h-6 w-6 -translate-y-1/2 rounded-md'
          onClick={handleTogglePassword}
        >
          <Lottie
            lottieRef={lottieRef}
            animationData={visibility}
            loop={false}
            autoplay={false}
            style={{ width: 18, height: 18 }}
            onDOMLoaded={handleLottieLoad}
          />
        </Button>
      </div>
    )
  }
)

PasswordInput.displayName = 'PasswordInput'

export { PasswordInput }