Hey folks, I am using motion.dev functions in order to animate certain React elements. I'm able to use certain motion.dev inline attributes in my elements, but not others.
#Motion React Component not working in Astro
deft field
First off, I have a component called /src/components/Jumbo.astro that looks like this:
---
import Button from './react-components/motion/Button.tsx';
const {name, job} = Astro.props;
---
<section class="main jumbo" id="home" data-scroll-section>
<div class="container">
<div class="row">
<div class="col text-left">
<h1>{name}</h1>
<p class="job">{job}</p>
<Button title="View Work" href="" classes="btn-motion btn-motion-popin box-shadow shadow-lg btn btn-primary view-portfolio" />
</div>
</div>
</div>
</section>
The Button component is a React component with the signature Motion components: normal HTML tags with motion. before them. For example:
<motion.div></motion.div>
<motion.button />
<motion.a></motion.a>
Here is what my file, /src/components/react-components/motion/Button.tsx looks like:
import React from "react";
import { motion } from "motion/react";
interface Props {
title: string,
href: string,
classes: string,
animation: string,
duration: number,
}
// Note:
// Initial is working. It's just that onHoverStart and whileHover are not working.
function Button({title, href, classes, animation, duration}: Props) {
return (
<motion.a className={classes} href={href} initial={{ opacity: 0.5 }} onHoverStart={() => console.log('hover started!')} whileHover={{scale: 1.1}}>{title}</motion.a>
);
}
export default Button;
initial, onHoverStart, and whileHover are Motion attributes.
The initial attribute is working (the button appears dimmed) but the onHoverStart and whileHover attributes are not working like they should.
Can anyone familiar with Framer Motion help me?
@random yarrow I looked at your previous post; is there any way to use event listeners to trigger the Motion attributes? I'm trying to do more complex animations so I need this to work
random yarrow
Heh, I was already reading 😛
deft field
Oh oops sorry!
Here is motion.dev's official docs on Motion React: https://motion.dev/docs/react-quick-start
random yarrow
lol Also there already too, will report back 😛
deft field
Thanks a bunch, I appreciate it
random yarrow
Np, have you tried with the client:only="react" directive on your button component?
deft field
WHAT THE--that fixed it!
random yarrow
