Будни разработчика

0:02

#статья дня

Все любят хорошие статьи по SVG.

От базового понимания координат и viewBox, через transform к clipPath и его анимации с помощью GSAP. Вот так вот просто.

Каждый шаг стильно иллюстрирован и ёмко разжёван: https://www.cassie.codes/posts/swipey-image-grids/

#svg #viewbox #clippath #gsap

3.4K views06:00

👍 32 👎

🐶 Читать статью

#codepen дня

Кажется, не было в мире более вызывающей штуки для веб-разработчиков, чем легендарный Cover Flow из Apple iTunes.

Я, честно говоря, не удивлён, что появился ещё один вариант: https://codepen.io/jh3y/pen/WNRvqJP

Вдохновение штука такая.

Прокрутка, перетаскивание, управление стрелками клавиатуры — прилагаются.

#gsap #coverflow #carousel

2.6K viewsedited 07:00

🍎 Научиться делать такие же

#codepen дня

Восхищаться красивыми примерами можно бесконечно, но полезные – гораздо… практичнее.

Вот недавно прошла очередная презентация Apple Keynote. Что сделает хороший разработчик? Правильно, воссоздаст анимацию её логотипа: https://codepen.io/Mamboleoo/pen/ZELqMOg

Что же сделает отличный разработчик?

А он не просто воссоздаст, но и покажет, как конкретно. Разложит на шаги и снабдит код подробными комментариями: https://codepen.io/Mamboleoo/pen/qBRQXPN

Кому не хватало понимания, как конкретно пишутся анимации с использованием GSAP – самое время пойти и попробовать.

👉 @htmlshit
#svg #canvas #gsap

2.6K viewsedited 07:01

👍 40 👎

🍏 Посмотреть анимацию

0:25

#codepen дня

Прекрасная работа Стива Гарднера: https://codepen.io/ste-vg/pen/GRooLza

За прошедшие полтора года многие уже, наверное, забыли, что такое самолёты. Этот пример позволит вспомнить 👀

А вообще, если коротко, это очень хороший пример интеграции библиотеки анимации GSAP и 3D-модели в WebGL при помощи Three.js. Код простой, чистый, абсолютно понятный.

И не забывайте, их держит в воздухе магия.

#gsap #scroll #webgl

3.5K views10:00

#codepen дня

Спирограф, слышали о таком развлечении? Если нет, крайне рекомендую найти себе, прокрастинация будет рада.

А пока давайте сделаем свой генератор спирограф-фигур в SVG на базе библиотек SVG.js, GSAP и generative-utils:

https://codepen.io/michellebarker/pen/GRMBVYX

Пакет generative-utils вообще довольно интересный, там приличное количество утилит для создания генеративного арта (не путать с дегенеративным, это что-то времён Хрущёва).

#svg #art #gsap

2.7K views10:32

Looking for some inspiration or a jumping off point? You're in the right place? From simple templates to experimental creations - you'll find it here.

#ссылка дня

GreenSock, создатели широко известной библиотеки для анимации GSAP, решили закрыть разом все вопросы по работе со скроллом. Эффекты? Нате. Анимация? Нате. Параллакс? Их есть у меня. Анимировать SVG? Без проблем. Даже WebGL завезли.

В общем, они просто взяли и выложили подборку различных эффектов анимации по скроллу, добавили к каждому видео-предпросмотр и ссылку на CodePen.

Меньше слов, больше ссылок:

https://greensock.com/st-demos/

P. S. Библиотека GSAP имеет весьма развесистое лицензирование, но условия бесплатного использования покрывают даже некоторые коммерческие применения. В любом случае, идеи — бесценны.

#gsap #css #js #scroll #animation

Gsap

GSAP | Docs & Learning

3.1K views07:00

3.0K views17:10

3.1K views18:04

#шок дня

Думал ли я, что буду скидывать сюда статьи и видео из 2015 года, а тем более — статьи по производительности из 2015 года, а тем более — статьи по производительности анимаций из 2015 года?

Нет, не думал. Есть разница между вечнозелёным и сиюминутным контентом. Статьи про золотую сетку и правила потока это одно, статьи про анимации — совсем другое. И тем не менее, мы здесь.

Итак, вам, пожалуй, все уши прожужжали о том, что нужно пытаться избегать JS-анимаций, если вам не нужен полный контроль над анимацией. Что все CSS-анимации давно выполняются на GPU с шикарной производительностью. Что браузеры становятся лучше и лучше... А не совсем.

Итак, всем известна библиотека анимаций от GreenSock — GSAP. Её авторы очень постарались, чтобы собрать в ней буквально всё, что нужно. Подражателей и альтернатив море, включая Animate API, но с трона пока не скинули.

И вот в 2015 году они записали интересный вебинар: "CSS animations performance: the untold story", вот и ссылка: https://greensock.com/css-performance/

Ну и сразу на видео: https://youtu.be/1ZWugkJV5Ks

TL;DR: если вы совмещаете transform-анимации с анимированием позиции, вас ждёт неприятный сюрприз.

Погоди, скажете вы, всем известно, что анимировать left-top это мерзко и вообще, ведь богоподобные трансформы исполняются на GPU.

И так-то да, но мы живём в 2023 году, нашими компьютерами можно ядерные взрывы считать десятками за раз, уже нельзя элемент подвинуть? Так что же не так?

А не так, господа, синхронизация потоков выполнения GPU и CPU-анимаций и перерисовок. Даже сейчас, запуская их демо на моём M2, я вижу подёргивания на CSS-версии: http://codepen.io/GreenSock/full/2a53bbbcd47df627f25ed1b74beb407d/

Да, авторы оставили дисклеймер, что многое зависит от вашей раскладки в принципе (стоит избегать вложенности, например), но... кто вообще последний раз об этом задумывался?

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

А почему я вообще начал с упоминания 2015 года? Ну, я думал, за столько лет стало получше. Оказалось, чуть хуже, чем ожидалось.

#css #js #gsap #animation #transform

2.5K viewsSergey Bekharsky, edited 18:54

0:02

2.9K viewsSergey Bekharsky, edited 13:51

#codepen дня

Яркий пример работы UI/UX сообществ.

1. Один популярный в iOS UX-сообществе автор, Робера Гелера, выдвигает идею. Например, индикатор pull-to-refresh совсем необязательно делать чем-то вроде спиннера или капли, как сейчас везде. Ну, типа, зачем это делать, когда есть скроллбар? Ну и делает пример на SwiftUI. Именно его я прикладываю к посту.

2. Потом приходит второй, популярный уже во frontend-кругах (ну Джей, конечно, кто же ещё), и говорит, что это можно легко сделать на CSS и JS.

3. Пока Джей телится с кодпеном, выходит Альваро Монторо и достаёт из широких штанин свой: https://codepen.io/alvaromontoro/pen/JjzEKWG

4. Спустя несколько часов Джей, наконец, прикладывает свой вариант: https://codepen.io/jh3y/pen/gOEgxbd

Грубо говоря, там, конечно, не настоящие скроллбары, а их имитация на SVG, анимированная через GSAP и ScrollTrigger.

Но! В скором времени нас ждёт Scroll-Driven Animations API и можно будет сделать всё то же самое. С нетерпением ждём.

Бросайте вызов устоявшимся практикам, котаны!

#css #ui #gsap #svg

3.3K viewsSergey Bekharsky, edited 19:40

#инструмент дня

Итак, это свершилось. GreenSock, создатели GSAP — самой крутой библиотеки анимаций на свете — обновили свой хук useGSAP для React.

Зачем он нужен?

Раньше приходилось жонглировать useEffect и useLayoutEffect, учитывать рендеринг на сервере, чистить за собой... ну как-то так:

import { useEffect, useLayoutEffect, useRef } from "react";
import gsap from "gsap";

// for server-side rendering apps, useEffect() must be used instead of useLayoutEffect()
const useIsomorphicLayoutEffect = (typeof window !== "undefined") ? useLayoutEffect : useEffect;
const container = useRef();
useIsomorphicLayoutEffect(() => {
    const ctx = gsap.context(() => {
     // gsap code here...
        }, container); // <-- scope for selector text
    return () => ctx.revert(); // <-- cleanup
}, []); // <-- empty dependency

С хуком же все очень просто:

import { useRef } from "react";
import gsap from "gsap";
import { useGSAP } from "@gsap/react";

const container = useRef();
useGSAP(() => {
    // gsap code here...
}, { scope: container }); // <-- scope is for selector text (optional)

И по-умолчанию даже пустые зависимости не надо передавать, если не хотите :)

В общем, жить можно было и без этого всего; но мы же любим сахар и когда за нас продумали корнер-кейсы. Демки тоже есть, к слову.

Пользуемся: https://github.com/greensock/react

И видео, как пользоваться этим добром: https://youtube.com/watch?v=l0aI8Ecumy8

#gsap #react

3.1K viewsSergey Bekharsky, edited 17:17

0:02

3.3K viewsSergey Bekharsky, 06:13

0:35