Можливість використання багаторазових анімацій в Framer

6 Березня 2024 в 22:05 23

При створенні анімацій у Framer можуть виникати різноманітні виклики та проблеми, зокрема, якщо потрібно застосувати кілька анімацій до одного елементу. У цій статті розглянемо одну з таких проблем та можливі способи її вирішення.


import { motion, useScroll, useTransform } from 'framer-motion';
function AnimationWrapper({ children, delay = 0, parallax = false, speed = 3 }) {
    // Convert the first child to a motion component if it's a valid element
    const MotionComponent = children && typeof children === 'object' && children.type ? motion(children.type) : motion.div; // Fallback to motion.div
    const { scrollYProgress } = useScroll();
    const transform = useTransform(scrollYProgress, [0, 1], [0, 100 * speed]);
    return (
        <MotionComponent
            viewport={{ once: true }}
            initial={{ opacity: 0, y: 50 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 1, delay: delay }}
            {...parallax == true && {style: { y: transform }}}
            {...children.props}
        >
            {children.props.children}
        </MotionComponent>
    );
}
export default AnimationWrapper;