React Spring для анимации веб-приложений на ReactJS. Знакомство с React Spring

[@aarovas]

Очень приятно наткнуться на такой великолепный канал, спасибо Мизаил!

[@aleksalex1479]

спасибо! полезная информация, и хорошая подача материала, приятно было смотреть ✨

[@forest_1771]

Странно. Странно, что у канала с такой подачей так мало подписчиков и просмотров. Все круто! Удачи!

[@dzmitrykubarski1462]

Супер! Спасибо вам.

[@mishanep]

Пожалуйста :)

[@МарияВасиленко-я5к]

Ух ты, ух ты, какой канал! Надо подписываться)))

[@jses8560]

Спасибо Вам за данное видео.

[@aarovas]

Однозначно подписка

[@dreamernum1792]

спасибо, лайк и подписка

[@terryterry2395]

Спасибо за контент. Можно видео использования спринг и реакт роутер

[@mishanep]

В каком контексте? Анимация для перехода между роутами?

[@terryterry2395]

@@mishanep да, верно.

[@yevabielinska6914]

Всем привет!)Подскажите как сделать анимацию в реакт приложение с бекграундом на сайте на движение мыши,картинка состоит из нескольких слоёв и должна перемещаться за мышкой вправо-влево.Буду очень благодарна за хороший пример или реализацию.

[@простойчеловек-с8к]

Спринг все ещё актуален, если есть реакт-моушен? Или они могут сочетаться?

[@mishanep]

У меня на текущем проекте используется активно именно спринг.

[@ValarM1]

Скажите, а как анимировать элемент внутри другого анимированного элемента ? Когда добавляю такую конструкцию, элемент исчезает

[@mishanep]

На хуках можно такую штуку реализовать, например, через useTransition. Он позволяет динамически добавлять элементы, и на появляющийся элемент можно сделать дополнительную анимацию. Скажем, появление/скрытие контейнера (напр. боковое или мобильное меню), а уже внутри него свой блок с анимацией.

[@Filislav]

Здравствуйте пытаюсь сделать появление заголовка не в песочнице а в проекте, делаю все по инструкции, библиотеку добавил, правда Spring импортируется сейчас просто из 'react-spring' - анимация не работает.Никаких ошибок нет, просто не работает. Не сможете ли подсказать почему вот код насколько это возможно import React from 'react'; import './MainPage.css'; import {Spring} from 'react-spring'; let MainPage = ()=> { return( Сканер рекламной продукции { (props) => (Кнопка нажата) } Push Me ) } export default MainPage;

[@Filislav]

На кнопку пока не завязано ничего

[@mishanep]

Добавьте в импорт компонент animated и вместо h2 сделайте animated.h2

[@Filislav]

@@mishanep Спасибо.

[@VasiliyAlexsandrovich]

Хорошее видео. Правда хотелось бы что бы его обновили. Стал читать документацию так там кое что изменилось за это время. Надеюсь автор прочтет мой коммит

[@mishanep]

Прочесть-то я прочту. Но тяжело обновлять видео при обновлении библиотек. Плюс интерес к этой теме был невелик, что снижает шансы возвращения к этой теме

[@VasiliyAlexsandrovich]

конечно сначала хочу еще раз выразить благодарность за все твои видео. понимаю что это требует затрат времени терпения и других личных ресурсов. я считаю что актуальность видео это 2 максимум 3 года. потом советую его обновлять. но а интерес к видео это не показатель. начинающие программисты мало что сами знают что искать и смотреть в интернете. Зато очень приятно наити такую мелочь у тебя на канале когда она им понадобиться

[@sevdev9374]

А как с типизацией этого всего? Если проект на Typescript

[@mishanep]

Сама библиотека идет с декларацией типов. Можно по каждому методу прямо в редакторе посмотреть, что для него требуется.

[@sevdev9374]

@@mishanep Спасибо, у вас очень хороший канал, лайк подписка.

[@jyjyjyj3]

Михаил, попробуйте купить рекламу или как-то раскрутить канал. У вас очень хорошо получается этот формат видео, очень доходчиво. Вы бы с легкостью смогли бы конкурировать с тем же Владиленом Мининым, канал которого сейчас активно растёт.

[@mishanep]

Спасибо, Артем. В рекламе не силен, увы. Все мои попытки обычно приводили к сливу бюджета.

[@feruzatamyradow5069]

@@mishanep Привет. Спасибо за видео. Я все это видел. вы дали очень хорошее объяснение. Разве вы не можете сделать видео про interpolate? Я этого не понимаю. Я искал информацию, но не понял. если возможно, разместите видео, полностью объясняющее это.

[@sevdev9374]

почему не ругается на class? вроде как должно быть className

[@mishanep]

Конечно, className должен быть. Вы правы.

[@ЕвгенийЖ-н6м]

Примеры из вашего ролика для версии 8.0.27

[@ЕвгенийЖ-н6м]

Кто-нибудь использовал данную библиотеку в продакшене?

[@mishanep]

Я использовал :) Потом перешёл на Framer motion. О ней тоже есть видео.

[@notsure8175]

@@mishanep С чем связано? Фреймер в среднем лучше?

[@ЕвгенийЖ-н6м]

Что за отстойная библеотека, в документации полно не работающих примеров.

[@Drezerak]

Как у него цуко работает!!! У нас строчка в строчку, буква в букву, точка в точку! А хоть бы моргнуло! Не работают именно стили, а setIsVisible() - работает! import React, { useRef, useState } from "react"; import "./styles.css"; import { Spring } from "react-spring"; export default function App() { const [isVisible, setIsVisible] = useState(false); const myRef = useRef(null); return ( Hello sprng setIsVisible(!isVisible)}>btn {(props) => ( Start editing to see some magic happen! )} ); }