getting error : function is not defined in react

Question

i did some animation code in react, but i am getting this error, getKeyFrames and getTiming is not define, there is some issue in my code, it is not getting my funciton

./src/WithLigin.js
  Line 59:5:  'getKeyFrames' is not defined  no-undef
  Line 68:5:  'getTiming' is not defined     no-undef

Search for the keywords to learn more about each error.

here i have attached my whole code can anyone please look into it and help me to resolve that issue ? any help will be really appreciated.

import React,{ useRef, useState } from "react";
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Redirect,
    withRouter,
    NavLink
} from "react-router-dom";
import ScrollToTop from "./scrollToTop";
import App from "./App";
import { useAuth0 } from "@auth0/auth0-react";
import { useSpring, animated, useTransition } from 'react-spring';
//import { useGesture } from 'react-use-gesture';
import { AnimationSequence, Animatable } from 'react-web-animation';

const LoginButton = () => {
    const { loginWithRedirect, isAuthenticated, isLoading, error } = useAuth0();
    const scrollingLeft = useSpring({
        from: { transform: "translate(60%,0)" },
        to: { transform: "translate(20%,0)" },
        config: { duration: 1000 },
        reset: true
    });

    const scrollingRight = useSpring({
        from: { transform: "translate(-60%,0)" },
        to: { transform: "translate(20%,0)" },
        config: { duration: 1000 },
        reset: true
    });

    const [items, set] = useState([1, 2, 3, 4]);
    const [currentTime,setCurrentTime] = useState('0');
    const [playState,setPlayState] = useState('running');
    const transitions = useTransition(items, item => item.key, {
        from: { transform: 'translate3d(0,-40px,0)' },
        enter: { transform: 'translate3d(0,0px,0)' },
        leave: { transform: 'translate3d(0,-40px,0)' },
    })

    getKeyFrames=() => {
        return [
            { transform: 'scale(1)', opacity: 1, offset: 0 },
            { transform: 'scale(.5)', opacity: 0.5, offset: 0.3 },
            { transform: 'scale(.667)', opacity: 0.667, offset: 0.7875 },
            { transform: 'scale(.6)', opacity: 0.6, offset: 1 },
        ];
    };

    getTiming=(duration) => {
        return {
            duration,
            easing: 'ease-in-out',
            delay: 0,
            iterations: 2,
            direction: 'alternate',
            fill: 'forwards',
        };
    }
    return (
        <Router>
                        <div className="full_width">
                            <AnimationSequence
                                playState={playState}
                                currentTime={currentTime}
                            >
                                <Animatable.div
                                    id="1"
                                    keyframes={this.getKeyFrames()}
                                    timing={this.getTiming(2000)}
                                >
                                    Web Animations API Rocks
                                </Animatable.div>
                                <Animatable.div
                                    id="2"
                                    keyframes={this.getKeyFrames()}
                                    timing={this.getTiming(4000)}
                                >
                                    It really does!
                                </Animatable.div>
                            </AnimationSequence>
                        </div>
        </Router>
    );
};

export default LoginButton;

Answer 1

Since this is functional component you can't use this and you need to define function using const . So it would be like this:

const getKeyFrames=() => {
        return [
            { transform: 'scale(1)', opacity: 1, offset: 0 },
            { transform: 'scale(.5)', opacity: 0.5, offset: 0.3 },
            { transform: 'scale(.667)', opacity: 0.667, offset: 0.7875 },
            { transform: 'scale(.6)', opacity: 0.6, offset: 1 },
        ];
    };

    const getTiming=(duration) => {
        return {
            duration,
            easing: 'ease-in-out',
            delay: 0,
            iterations: 2,
            direction: 'alternate',
            fill: 'forwards',
        };
    }

and call like this:

<Animatable.div
    id="1"
    keyframes={getKeyFrames()}
    timing={getTiming(2000)}
>
    Web Animations API Rocks
</Animatable.div>
<Animatable.div
    id="2"
    keyframes={getKeyFrames()}
    timing={getTiming(4000)}
>

Answer 2

You forgot to declare the functions as variables (example: const): it should be:

 const getKeyFrames=() => { return [ { transform: 'scale(1)', opacity: 1, offset: 0 }, { transform: 'scale(.5)', opacity: 0.5, offset: 0.3 }, { transform: 'scale(.667)', opacity: 0.667, offset: 0.7875 }, { transform: 'scale(.6)', opacity: 0.6, offset: 1 }, ]; }; const getTiming=(duration) => { return { duration, easing: 'ease-in-out', delay: 0, iterations: 2, direction: 'alternate', fill: 'forwards', };

and then since it is a functional component you don't need to use this keyword

 <Animatable.div id="1" keyframes={getKeyFrames()} timing={getTiming(2000)} > Web Animations API Rocks </Animatable.div> <Animatable.div id="2" keyframes={getKeyFrames()} timing={tgetTiming(4000)} >

Answer 3

Change all your functions code following this - assign your function const getKeyFrames=() =>{} and pass like this keyframes={getKeyFrames}

 const getKeyFrames=() => {
        return [
            { transform: 'scale(1)', opacity: 1, offset: 0 },
            { transform: 'scale(.5)', opacity: 0.5, offset: 0.3 },
            { transform: 'scale(.667)', opacity: 0.667, offset: 0.7875 },
            { transform: 'scale(.6)', opacity: 0.6, offset: 1 },
        ];
    };

jsx

      <Animatable.div
         id="1"
         keyframes={getKeyFrames}
         timing={getTiming(2000)}
         >