I’ve managed to animate expanding .project-card div when useState changes to true and .project-details appears. I have a problem with animating it to previous height when isActive changes to false and .project-card collapse immediatelly.
Appreciate all help and suggestions.
import '../styles/project.css';
import { useState, useTransition } from 'react';
import { motion } from 'framer-motion';
import { MdOutlineArrowForwardIos } from 'react-icons/md';
function Project(project) {
const { index } = project;
const [isActive, setIsActive] = useState(false);
const handleClick = () => {
setIsActive((current) => !current);
};
return (
<motion.div
key={project.id}
className='project-card'
initial={{ opacity: 0, y: 300, height: '57px' }}
animate={{ opacity: 1, y: 0, height: isActive ? 'auto' : '57px' }}
exit={{ opacity: 0, y: 300 }}
transition={{ duration: 0.9, delay: index * 0.2, ease: 'backInOut' }}>
<div className='project-card-top'>
<div className='project-title'>
<div>
<MdOutlineArrowForwardIos
onClick={handleClick}
className='project arrow'
style={{
transform: isActive ? 'rotate(0)' : '',
}}
/>
<h3 class='blue'>{project.name}</h3>
</div>
<div className='project-techs'>
{project.technology.map((title) => {
return (
<div
key={title}
className='tech-img'>
<img src={`./assets/icons/${title}`} />
</div>
);
})}
{project.commercial ? (
<div>
<p className='project-tech commercial'>Commercial</p>
</div>
) : null}
</div>
</div>
{isActive && (
<motion.div
initial={{ opacity: 0}}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{
duration: 0.3,
delay: 0.5,
ease: 'backInOut',
}}
className='project-details'>
<div className='project-description'>{project.description}</div>
</motion.div>
)}
</div>
</motion.div>
);
}
export default Project;
I’ve tried with GPT some options inluding :
declaring height style and
transition={{
duration: 0.3,
height: {
duration: 0.3,
ease: 'easeOut'
}
}}