Анимация набора текста GSAP | Основы анимации и временной шкалы (2020)

В этом видео мы создадим эффект пишущей машинки с помощью GSAP. Никаких CSS-анимаций не требуется. Вы удивитесь, как мало кода здесь нужно. Всего около 15 строк JavaScript. Итак, что такое GSAP? Это платформа анимации GreenSock. Их слоган: «Сверхвысокопроизводительная анимация профессионального уровня для современного веба». Это набор небольших файлов JavaScript, которые помогают создавать анимации, отлично выглядящие в современных браузерах. Эта библиотека для анимации очень проста в использовании. В этом видео я покажу вам некоторые основы. Мы рассмотрим основы анимации (tween) и временной шкалы (timeline). Код: https://github.com/codeSTACKr/gsap-ty... Таймлайн: 00:00 Вступление 00:19 Спонсор (Scrimba) 01:09 Что такое GSAP? 01:34 HTML 03:12 CSS 04:45 JavaScript - Анимация курсора 07:10 CSS - Стили блоков 08:28 JavaScript - Анимация блоков 12:31 JavaScript - Анимация текста 17:52 JavaScript - Анимация мерцания _____________________________________ 📚 Научитесь программировать всего за несколько месяцев здесь: Код скидки Treehouse: https://treehouse.7eer.net/codeSTACKr _____________________________________ 🛠️ Инструменты, которые я использую: 🟠 Тема: https://marketplace.visualstudio.com/... 🟠 Шрифт: STACKr Code (эксклюзивно для моего курса VS Code - https://vsCodeHero.com) 🟠 Пакет расширений SuperHero: https://marketplace.visualstudio.com/... 🚢 Разверните бесплатно на Vercel: https://vercel.com/ambassadors/codest... _____________________________________ 📢 Ограниченное по времени предложение от Scrimba!! https://scrimba.com/path/gfrontend?ut... _____________________________________ 💖 Поддержите нас! PayPal: https://paypal.me/codeSTACKr _____________________________________ Смотрите далее: Веб-разработка — Дорожная карта для начинающих (2020) —    • Web Developer Roadmap 2020 | A Guide To St...   Плейлист: Веб-разработка для начинающих —    • Web Development - Beginners Roadmap (2019)   _____________________________________ Свяжитесь со мной: Веб-сайт: http://www.codestackr.com Twitter:   / codestackr   Instagram:   / codestackr   Facebook:   / codestackr   _____________________________________ ** Заявление об аффилированном партнерстве: Некоторые из вышеуказанных ссылок могут быть партнерскими ссылками, которые могут приносить мне комиссию с продаж без дополнительных затрат для вас. #codeSTACKr #GSAP #Animation