react spa animacje

pytanie zadane 16 sierpnia 2020 w JavaScript przez rob Bywalec (2,440 p.)
zamknięte 17 sierpnia 2020 przez rob

Witam,

Osttatno miałem problem z karuzelą i animacją ale odpuściłem(okazało się zbyt trudne), i nagle okazało się, że SPA w react też przecież odpala się 'od razu' więc animacje też odpalają się jak użytkownik nie ma szansy jej zobaczyć...(niżej położone) a jednak widziałem SPA gdzie w miarę przewijania strony jest uruchamiana animacja niezależnie czy jest robiona przy pomocy czystego CSS czy jakiejś biblioteki. Czy ktoś mógłby mi wyjaśnić jak to jest robione? Proszę o pomoc

komentarz zamknięcia: Rozwiązanie problemu

2 odpowiedzi

odpowiedź 16 sierpnia 2020 przez jankustosz1 Nałogowiec (35,880 p.)
wybrane 17 sierpnia 2020 przez rob

Najlepsza

Wyjaśnij o co Ci chodzi. W react'cie biblioteki do animacji mają głównie 2 cele:

1) Animowanie, gdy następuje zmiana w routingu.

2) Poprawienie wydajności poprzez usunięcie komponentu po jego animacji zniknięcia. Gdy się przekazuje komponentowi czy ma być wyświetlany do propsów to po jego zniknięciu ciągle react go musi renderować co pogarsza wydajność(Bez biblioteki oczywiście też można zrobić event, gdy animacja się zakończy i wtedy go usunąć)

Od razu mówię, że nie jestem w tym żadnym ekspertem i też się uczę reacta. Wydaje mi się, że do nauki lepiej pierwsze popróbować, bez bibliotek, a dopiero potem je użyć, by lepiej zrozumieć jak działają i jakie problemy rozwiązują.

komentarz 16 sierpnia 2020 przez rob Bywalec (2,440 p.)

chodzi mi o coś takiego, to jest moja appka w Reakcie

code

https://github.com/robkot500/electric_site

live

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

jak spojrzysz na stronę to na dole są kwadraty które powinny animować dopiero jak użytkownik przewinie stronę

komentarz 17 sierpnia 2020 przez jankustosz1 Nałogowiec (35,880 p.)

Mam wrażenie, że nie wiesz co robisz, masz pytanie odnośnie biblioteki framer-motion, nawet jej nie wymieniłeś. Btw. bardzo ciekawa biblioteka, jak sobie teraz na nią patrzę.

Moim zdaniem powinieneś pierwsze napisać tę stronę bez reacta, żeby się czegoś nauczyć, ale rób jak chcesz.

Niby jaka linia w twoim kodzie miałaby sprawić, że animacja zacznie się dopiero po przewinięciu strony? Musisz w useEffect podpiąć się pod event przewijania strony i, gdy będzie w odpowiednim miejscu wystartować animację.

komentarz 17 sierpnia 2020 przez jankustosz1 Nałogowiec (35,880 p.)

@rob, https://www.youtube.com/watch?v=cTYmwtY2EhQ

Nawet filmiki są tak trudno poszukać? Btw. nie wrzucaj pozycji scrolla do statów tak jak ten gościu, bo renderowanie wszystkiego na nowo kilkadziesiąt razy na sekundę to kretynizm, trzymaj tylko boola czy pokzywać.

komentarz 17 sierpnia 2020 przez rob Bywalec (2,440 p.)
edycja 17 sierpnia 2020 przez rob

dzięki za wskazówki, co znaczy "trzymaj tylko boola czy pokzywać." nie bardzo rozumiem

własnie przejrzałem dokumentację nie mogę tam znaleźć słowa na temat wyzwalania animacji, chodzi mi o framer-motion :(

komentarz 17 sierpnia 2020 przez jankustosz1 Nałogowiec (35,880 p.)

Przecież wysłałem linka... Do tego nawet na filmiku gościu zrobił dokładnie co chciałeś. Zamiast ustawiać animate na sztywno można ustawić na state/prop i wtedy przy każdej jego zmianie nastąpi animacja. Zamień tylko lastYPos aby było równe na useRef i wydajność się bardzo poprawi.

odpowiedź 16 sierpnia 2020 przez DawidK Nałogowiec (37,910 p.)

Jeżeli chodzi o czysty CSS i JS to nie jest to skomplikowane - nasłuchujesz event scroll i odpowiednio usuwasz lub dodajesz klasy css.

W poniższym przykładzie body ma wysokość 1,5 okien przeglądarki, na środku jest wyśrodkowany div (dodana jest też właściwość transition dzięki czemu animacja zmiany będzie płynna). W JS nasłuchujesz na scroll i odpinasz klasę odpowiedzialną za mały rozmiar i kolor czerwony a w zamian podpinasz klasę która nadaje kolor niebieski i większy rozmiar.

Scroll możesz kontrolować np dzięki scrollY

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Scroll</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <style>
        * {
            margin: 0;
        }

        body {
            height: 150vh;
        }

        div {
            left: 50%;
            position: fixed;
            top: 50%;
            transform: translate(-50%, -50%);
            transition: 1s linear;
        }

        .small {
            background-color: red;
            height: 50px;
            width: 50px;
        }
        .big {
            background-color: blue;
            height: 200px;
            width: 200px;
        }
    </style>
</head>
<body>
    <div id='test-div' class='small'></div>

    <script>
        const div = document.querySelector('#test-div');
        window.addEventListener('scroll', () => {
            let position = window.scrollY;
            if(position >= 80){
                div.classList.remove('small');
                div.classList.add('big');
            } else {
                div.classList.remove('big');
                div.classList.add('small');
            }
        })
    </script>
</body>
</html>