011 • Button interaction
August 26, 2023
Share
???
Today, I'm diving into some new experiments. I've been working on creating an intriguing interaction when hovering over a button.
To save time on manually fine-tuning the animation timing for individual hearts, I used a simple code override.
If you want a step-by-step tutorial on how to make an interaction like this, let me know on X.
For those who are curious, the code I used:
Today, I'm diving into some new experiments. I've been working on creating an intriguing interaction when hovering over a button.
To save time on manually fine-tuning the animation timing for individual hearts, I used a simple code override.
If you want a step-by-step tutorial on how to make an interaction like this, let me know on X.
For those who are curious, the code I used:
Today, I'm diving into some new experiments. I've been working on creating an intriguing interaction when hovering over a button.
To save time on manually fine-tuning the animation timing for individual hearts, I used a simple code override.
If you want a step-by-step tutorial on how to make an interaction like this, let me know on X.
For those who are curious, the code I used:
import type { ComponentType } from "react"
import { motion } from "framer-motion"
const easing = "easeIn"
const repeat = Infinity
export function Star(Component): ComponentType {
return (props) => {
const getRandomValue = (min, max) => Math.random() * (max - min) + min
const randomDuration = getRandomValue(3, 4.4)
const randomDelay = getRandomValue(0, 1)
const randomScale = getRandomValue(0, 1)
const randomOpacity = getRandomValue(0, 0.7)
return (
<Component
{...props}
as={motion.div}
initial={{ opacity: 0 }}
animate={{
opacity: [randomOpacity, 1, 0],
scale: [randomScale, 1, 0],
}}
transition={{
duration: randomDuration,
repeat: repeat,
delay: randomDelay,
ease: easing,
}}
/>
)
}
}Contact
If you have any questions, feel free to
If you have any questions,
Newsletter
Thanks
for
watching!
Sign
up
to
newsletter
and
receive
updates
on
new
Framer
tips
& freebies.