react carusel framer-motion

Question

Witam, mam problem z animacją która działa tylko na pierwszym elemencie w carousel, myślę, że dlatego, że kod carousel jest odpalomny w całości i te animacje odbywają się tylko, że ich nie widać bo przecież znajdujemy się na elemencie 1. Czy ktoś zna jakiś sposób aby to przeskoczyć? chodzi o te dwa prostokąty na środku które animują tylko na pierwszym elemencie

code

 https://github.com/robkot500/electric_site

live

https://robkot500.github.io/electric_site/

Proszę o pomoc

Answer 1

Powiem Ci, że bardzo się rozwijasz pod kątem pisania kodu w react, oby tak dalej :)

Co do problemu - nie wiem czy to będzie rozwiązanie ale dlaczego nie stworzysz sobie pod komponentu dla pojedynczego itema z karuzeli?

<div className='carousel-item carousel-item-two'>
  <div onClick={() => reactSwipeEl.prev()} className='arrow-wrapper'><i class="fas fa-angle-left"></i></div>
  <div className='item-wrapper'>
      <motion.div animate={{ y: 200, }} transition={{ ease: "easeOut", duration: 0.1 }} className='item item-up'>Fotowoltaika</motion.div>
      <motion.div animate={{ y: -210 }} transition={{ ease: "easeOut", duration: 0.1 }} className='item item-down'>Układamy nowe instalacje na podstawie projektu wykonawczego lub na podstawie własnej wiedzy i doświadczenia.</motion.div>
  </div>
  <div onClick={() => reactSwipeEl.next()} className='arrow-wrapper'><i class="fas fa-angle-right"></i></div>
</div>

Ten kod jest powielany i myślę, że jeśli go wywalisz do pojedynczego komponentu (i będziesz je rerenderował) to powinno rozwiązać problem :)

Comments

dziękuję bardzo :), bardzo mnie cieszą takie słowa,

tak masz rację, ale to był tak zwany brudny kod pisany na gorąco i przez chwilę myślałem, że to rozwiąże problem ale nie....:(

zrobiłem to tak

import React from 'react';
import ReactDOM from 'react-dom';
import ReactSwipe from 'react-swipe';
import { motion } from 'framer-motion';

const Carousel = () => {
    let reactSwipeEl;
    const it = ['one', 'two', 'three', 'four']
    const items = it.map(item => {
        console.log(item)
        return (
            <div className={`carousel-item carousel-item-${item}`}>
                <div onClick={() => reactSwipeEl.prev()} className='arrow-wrapper'><i class="fas fa-angle-left"></i></div>
                < div className='item-wrapper' >
                    <motion.div animate={{ y: 200, }} transition={{ ease: "easeOut", duration: 0.4 }} className='item item-up'>Instalacje elektryczne</motion.div>
                    <motion.div animate={{ y: -210 }} transition={{ ease: "easeOut", duration: 0.4 }} className='item item-down'>Układamy nowe instalacje na podstawie projektu wykonawczego lub na podstawie własnej wiedzy i doświadczenia.</motion.div>
                </div >
                <div onClick={() => reactSwipeEl.next()} className='arrow-wrapper'><i class="fas fa-angle-right"></i></div>
            </div >
        )


    })

    return (
        <div className='carousel-container'>
            <ReactSwipe
                className="carousel"
                swipeOptions={{ disableScroll: true, continuous: true, auto: 3000, }}
                ref={el => (reactSwipeEl = el)}
            >
                {items}
            </ReactSwipe>
            <div className='abc'>Profesjonalne usługi elektryczne w Rybniku i okolicach. Zaufaj wiedzy i doświadczeniu.</div>

        </div>
    );
};
export default Carousel

ale nie pomogło.... :(

---

https://codesandbox.io/s/headless-rgb-sokv4?fontsize=14&hidenavigation=1&theme=dark&file=/src/App.js:578-590

Kombinowałem dość długo z twoim problemem i o ile udało mi się znaleźć rozwiązanie dla wyłapania eventu, który zmienia stan Twojej karuzeli (link wyżej) o tyle nie ogarniam biblioteki do animacji. Nie umiałem dogrzebać się do miejsca w którym rozpoczyna się animacje. 

---

Nie umiałem dogrzebać się do miejsca w którym rozpoczyna się animacje

Może devtoolsy pomogą?

https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints#event-listeners

https://developers.google.com/web/tools/chrome-devtools/inspect-styles/animations

---

Szczerze siedziałem przy tym półtorej godziny i nie mam sił wracać do tej biblioteki. :D Ja jestem zwolennikiem pisania własnych animacji w czystym css. Przy tym kodzie udało mi się dobrnąć do wyłapania eventu podczas zmiany slida w karuzeli, co też nie było napisane w dokumentacji (a przynajmniej to co tam napisali nie działało) no ale dalej już poległem z tym refreshem animacji.

---

W kązdym razie dziękuję wszystkim, chyba muszę coś zmienić na stronie......:(

---

a jak jest rozwiązywane w react stosowanie animacji w SPA, skoro kod od razu jest uruchamiany dla elementu położonego poza widocznością- niżej to też od razu jest uruchamiana animacja i nie będzie widoczna jak użytkownik przejdzie do tego miejsca-, jest jakiś trigger który wyzwala tą animację? albo jakiś inny sposób?