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

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

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

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

При створенні анімацій у 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;

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

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;

framer Анімація проблема рішення

Останні новини

Поліція затримала мешканця Вознесенщини за вимагання 1000 доларів

14 Вересня 2024 в 14:06

Затримано підозрюваного у вчиненні умисного заподіяння тілесних ушкоджень патрульному поліцейському в Вознесенському районі

14 Серпня 2023 в 14:49

Підвищення цін на проїзд в приміському автотранспорті

20 Липня 2023 в 20:26

Читайте також

Як отримати від 100 грн за реєстрацію в ПУМБ

14 Серпня 2023 в 15:14

Як отримати від 100 грн за реєстрацію в Sense SuperApp (Альфа-Банк)

3 Липня 2023 в 13:22

Як економити на онлайн-покупках с кешбек-сервісом LetyShops

3 Липня 2023 в 13:04

Використання будь-яких матеріалів, розміщених на сайті, дозволяється лише за умови обов'язкового гіперпосилання на сторінку voz.city, на якій розміщений матеріал.

© 2025 VozCity