#gsap — Public Fediverse posts

Creating Custom Page Transitions in Astro With Barba.js and GSAP, by @codrops:

https://tympanus.net/codrops/2026/04/08/creating-custom-page-transitions-in-astro-with-barba-js-and-gsap/

#astro #gsap #tooling #animations #javascript

Sticky Grid Scroll: Building a Scroll-Driven Animated Grid, by @theoplawinski.com (@codrops):

https://tympanus.net/codrops/2026/03/02/sticky-grid-scroll-building-a-scroll-driven-animated-grid/?_bhlid=8425eb318a74bb38eff9c01ff5ae8002f772b97e

#tutorials #css #grids #layout #scrolling #gsap

Spiral Scrollytelling in CSS With “sibling-index()”, by @csstricks:

https://css-tricks.com/spiral-scrollytelling-in-css-with-sibling-index/

#css #functions #scrolling #gsap

Tác giả tạo bộ thành phần & mẫu thiết kế **Next.js** miễn phí, tập trung vào hiệu quả công việc. Bao gồm: mẫu giao diện hoàn chỉnh, khối động, thành phần động (nút, preloader). Sử dụng: **Next.js**, **Tailwind CSS**, **Framer Motion**, **GSAP**. Mời góp ý để cải thiện. #Nextjs #TailwindCSS #FramerMotion #GSAP #MSS #ThiếtKếWeb #CSS #JS #FreeTool

https://www.reddit.com/r/SideProject/comments/1po0u2l/i_built_a_set_of_free_nextjs_components_and/

Анимированный UI: как улучшить взаимодействие с пользователем

Анимация пользовательского интерфейса прошла долгий путь за последнее десятилетие, они превратились в универсальный цифровой язык, который люди узнают и понимают. Эти микровзаимодействия позволяют дизайнерам общаться с пользователями посредством движения и анимации, предоставляя им рекомендации, контекст и создавая захватывающий пользовательский опыт. В продакшене анимация всегда балансирует между выразительностью и производительностью. Чем сложнее сцена, тем выше нагрузка на процессор, особенно на мобильных устройствах. Поэтому важно оптимизировать: использовать GPU-дружественные свойства (transform, opacity), избегать тяжёлых reflow, а для сложных эффектов — применять библиотеку, которая работает с отложенным рендерингом, например Framer Motion или GSAP. Это не только повышает плавность, но и снижает энергопотребление, что прямо влияет на опыт пользователя. Когда команда проектирует систему анимаций, важно фиксировать принципы в дизайн-системе. Это помогает избежать хаоса и гарантирует согласованность между продуктами. Хорошая практика — описывать длительность, кривые ускорения и паттерны движения как переменные, чтобы и дизайнеры, и разработчики говорили на одном языке. Например, motion-tokens, где заданы типовые параметры переходов: fast-out-slow-in, linear-out-slow-in и т.д. На зрелом уровне анимация становится не надстройкой, а частью архитектуры интерфейса. Она помогает продукту чувствоваться цельным, обеспечивает предсказуемость и ритм, а главное — создаёт ощущение «живого» цифрового опыта. Привет, я Максим, frontend-разработчик в компании SimbirSoft, в этой статье расскажу, как сделать полезный для пользователя UI.

https://habr.com/ru/companies/simbirsoft/articles/974772/

#UI #css #javascript #reactjs #transitions #keyframes #web_animations_api #gsap #framer_motion #lottie

To celebrate GSAP going 100% FREE, we teamed up with Osmo, GSAP & Webflow to bring you 5 amazing demos + tutorials + Webflow cloneables ✨🎉

You’ll learn how to split text, scribble on hover, smash headlines, build glowing grids, and morph icons!

Check it out: https://tympanus.net/codrops/2025/05/14/from-splittext-to-morphsvg-5-creative-demos-using-free-gsap-plugins/

#gsap #webflow #tutorial #webdevelopment #frontend #creativecoding

Webflow just announced that #GSAP is now 100% #free, which is as shocking as finding out water is wet. 🚰🎉 Meanwhile, they've also reinvented the wheel by reminding us that their platform can "manage content at scale" and "optimize," because clearly, nobody's ever thought of that before. 🙄🔄
https://webflow.com/blog/gsap-becomes-free #Webflow #contentmanagement #optimization #news #HackerNews #ngated

Webflow makes GSAP 100% free – plus more updates

https://webflow.com/blog/gsap-becomes-free

#HackerNews #Webflow #GSAP #free #updates #webdesign #animation #tools

From playful Dribbble concept to a fully interactive tribute to Warhol—Warhol Arts is more than eye candy 🎨✨

In this in-depth case study, Serhii Polyvanyi from https://blacklead.studio breaks down how it was built with GSAP + Webflow, sharing hands-on techniques, smart workflows, and performance tips.

Read it here: https://tympanus.net/codrops/2025/04/01/warhol-arts-a-digital-playground-of-pop-pixels-and-pure-motion/

#webdesign #animation #website #webflow #gsap #casestudy

Костыли из 90-х и принцип HTML First

Кадр из презентации Frontmania 2022: Kilian Valkhof — Stop using JavaScript for that Недавно на Хабре публиковался перевод статьи «Вам не нужен для этого JavaScript» с примерами, где код JS легко заменить на HTML. На самом деле возврат к основам HTML, простым сайтам и читаемому коду без сложных фреймворков — довольно популярная идея. Сейчас всё больше сайтов создаётся по принципу HTML First .

https://habr.com/ru/companies/ruvds/articles/793680/

#ruvds_статьи #HTML #CSS #JS #JSSS #костыли #Netscape_Navigator #PWA #SVG #GSAP #Svija_Vibe #HTML_First #React #чистый_код #WASM #WebAssembly #Tailwind #Tachyons #hyperscript #Alpine