Alternative to react-spring's 'useSpring' hook in Framer Motion

Hello,

I’m trying to follow the last Joshua Comeau’s tutorial ‘Boop!’ : https://www.joshwcomeau.com/react/boop/

He used react-spring library.

For the #springs-to-the-rescue part I found a workaround :

I remove this :

const style = useSpring({
  display: 'inline-block',
  transform: isBooped ? `rotate(${rotation}deg)` : `rotate(0deg)`,
});

<animated.span onMouseEnter={trigger} style={style}>
  {children}
</animated.span>

And do this :

<motion.span
  onMouseEnter={trigger}
  style={{ display: "inline-block" }}
  animate={{
    x: isBooped ? x : 0,
    y: isBooped ? y : 0,
    rotate: isBooped ? rotation : 0,
    scale: isBooped ? scale : 1,
    transition: {
       type: "spring",
       stiffness: 300,
    }
   }}
>
    {children}
</motion.span>

But now I’m stuck in the hook part (#disconnected-boops)

I couldn’t find an alternative to the react-spring’s ‘useSpring’ hook in Framer Motion.

Is there a way to achieve this with Framer Motion?

[deadcoder0904]

Ah, I wish I checked Github. I solved it with someone’s help & was just about to post the answer.

Thank you @mattgperry for the stiffness & damping tip. I never would’ve noticed otherwise.

Codesandbox is here → https://codesandbox.io/s/react-spring-vs-framer-motion-boop-animation-did6x

And posting it here in case Codesandbox gets deleted.

useBoop.ts

import { Variants } from "framer-motion"
import React from "react"

export const useBoop = ({
	x = 0,
	y = 0,
	rotation = 0,
	scale = 1,
	timing = 150,
	transitionConfig = {
		type: "spring",
		stiffness: 300,
		damping: 10,
	},
}): [boolean, Variants, () => void] => {
	const [isBooped, setIsBooped] = React.useState(false)
	const variants = {
		boop: {
			translateX: x,
			translateY: y,
			rotate: rotation,
			scale: scale,
			transition: transitionConfig,
		},
		rest: {
			rotate: 0,
			scale: 1,
		},
	}
	React.useEffect(() => {
		if (!isBooped) return

		const timeoutId = window.setTimeout(() => {
			setIsBooped(false)
		}, timing)

		return () => {
			window.clearTimeout(timeoutId)
		}
	}, [isBooped, timing])

	const trigger = React.useCallback(() => {
		setIsBooped(true)
	}, [])

	return [isBooped, variants, trigger]
}

App.tsx

import React from "react"
import { motion } from "framer-motion"

import { useBoop } from "./useBoop"
import { Cog } from "../Cog"

export const Motion = () => {
	const [isBooped, variants, trigger] = useBoop({
		rotation: 20,
		timing: 150,
	})

	return (
		<>
			<h1 className="text-6xl text-pink-500">Framer Motion</h1>
			<motion.span
				onMouseEnter={trigger}
				animate={isBooped ? "boop" : "rest"}
				variants={variants}
			>
				<Cog className="w-16 h-16" />
			</motion.span>
		</>
	)
}

[mattgperry]

Motion also uses stiffness and damping instead: https://codesandbox.io/s/react-spring-vs-framer-motion-boop-animation-forked-lk236?file=/src/framer-motion/useBoop.tsx:0-933