Lottie json animation make click on animated elements React.js

1

Hello community.-

I have tried to access elements in a Lottie json but i cant do it in React.js, i want to be able to click on different animation elements and then redirect to another page in my React application. Thank you in advance !!

3

So this is what i have found, my Lottie json has id s on it so i could reference the image ids and add a eventListener to that image with a click argument, the problem is that no matter what i do i cant get the image, (that using document.getElementById) even with its id, so when i try to add the eventlistener it complains that no instance has been found. If someone could help me with this it would be great !! This is my code so far with errors

import React, { useRef, useEffect } from ‘react’;
import {
MDBContainer
} from ‘mdb-react-ui-kit’;
import Lottie from ‘react-lottie’;
import { Lottie as lottie, Animation } from ‘@lottiefiles/lottie-js’;
import { useRouter } from ‘next/router’;
import animationData from ‘…/…/public/lotties/loginlottie’;
import styles from ‘./login.module.css’;

export default function login() {
const refSignup = useRef(null);
const style = {
height: ‘100%’,
width: ‘100%’,
};

const router = useRouter();

async function loadAnimation() {
const anim = Animation.fromURL(’…/…/public/lotties/loginlottie’);

anim.getElementById('image_9').addEventListener('click', () => {
  router.push('/signup')
})
/*anim.addEventListener('click', (event) => {
  router.push('/signup')
})
*/

}

loadAnimation();

/*
useEffect(() => {
document.getElementById(‘image_9’);
addEventListener(‘click’, () => {
router.push(’/signup’);
})
}, [])
*/

const defaultOptions = {
loop: true,
autoplay: true,
animationData: animationData,
ref: refSignup,
rendererSettings: {
preserveAspectRatio: “xMidYMid slice”
}
};

return (

<MDBContainer fluid>
<Lottie
    isClickToPauseDisabled={true}
    options={defaultOptions}        
    style={style}        
  />
</MDBContainer>

)
}

1 Like