loading...

Simple Animations with React Hooks

spaciecat profile image Spacie Updated on ・1 min read

Hooks videos (3 Part Series)

1) Simple Animations with React Hooks 2) Keyboard input with React Hooks 3) Hover States with React Hooks

Hi DevPeeps™! 👋

I just posted my first video tutorial (also my first youtube video in general)!

It's about using react hooks to create simple animations!

I've been getting really into hooks lately (especially linking them to other web APIs), so expect more hooks videos in the near future!

Also, if anyone has any feedback on the video I'd really love to hear it!
I'm quite new to video production and need all the advice I can get!

Thanks for reading and/or watching!


function useAnimation(duration) {
    const [progress, setProgress] = useState(0)
    const [startTime, setStartTime] = useState(Date.now())
    const reset = () => setStartTime(Date.now())
    useEffect(() => {
        let queuedFrame
        const frame = () => {
            const now = Date.now() - startTime
            if (now < duration) queuedFrame = requestAnimationFrame(frame)
            setProgress(Math.min(1, now / duration))
        }
        frame()
        return () => cancelAnimationFrame(queuedFrame)
    }, [startTime, duration])
    return [progress, reset]
}

Hooks videos (3 Part Series)

1) Simple Animations with React Hooks 2) Keyboard input with React Hooks 3) Hover States with React Hooks

Posted on by:

spaciecat profile

Spacie

@spaciecat

Hiya! I'm just a peep with a love of code, cats, and the cosmos~ "When I die I'm going to callback hell." - Spacie 2019

Discussion

markdown guide
 

The code is pretty sweet and your explanations seem good. The only thing that I really had any gripes with was the background sounds/music. The slight dinging playing from my laptop speakers were kind of distracting.

I could follow the code the way it was explained and seemed to make sense, great video!

 

Very cool! The one part that tripped me up was the use of requestAnimationFrame.

Looks like this part of the browser's API, but it was just introduced without a lot of discussion which caught me off guard.

developer.mozilla.org/en-US/docs/W...