Загрузка видео...

Не удалось загрузить видео

Возникла проблема при загрузке этого видео. Это может быть связано с временными проблемами сети или видео может быть недоступно.

На главную

CSS Scroll-Snapping + GSAP ScrollTrigger 🙀 What a lovely combo! I didn't know anything about #css scroll-snapping until studying a recent demo from Julio Rodriguez (linked below). I wanted to build my own simplified version from scratch to understand it better. Notice how the animated list of headers always... show more

Carl 💥 Creative Coding Club

6,084 subscribers

29,409 просмотров • 1 год назад •via X (Twitter)

Искусство Образование Наука и технологии #css

Anya Rossi• Live Now

Private livecam show

Комментарии: 8

Фото профиля Carl 💥 Creative Coding Club

Carl 💥 Creative Coding Club1 год назад

Here's my "basic" demo using @greensock's ScrollTrigger with CSS Scroll-Snapping

Фото профиля Carl 💥 Creative Coding Club

Carl 💥 Creative Coding Club1 год назад

This is the inspiring, extra-fancy @jh3yy version And you can get in on his newsletter here:

Фото профиля Sam Sen | Web & Digital Design

Sam Sen | Web & Digital Design1 год назад

@jhey Looks awesome!

Фото профиля crapthings

crapthings1 год назад

@jhey cool

Фото профиля Dan Florian

Dan Florian1 год назад

@jhey Works in safari. That’s a shocker 😮

Фото профиля Armando J. Perez-Carreno

Armando J. Perez-Carreno1 год назад

@jhey Love the demo

Фото профиля Carl 💥 Creative Coding Club

Carl 💥 Creative Coding Club1 год назад

@jhey Thanks!!!

Фото профиля Andy

Andy1 год назад

@jhey Removing the scroll-snap CSS in html { } and li { } doesn’t change the demo behavior at all. It looks like GSAP does all the lifting.

Похожие видео

i wasn't aware of `animation-timeline` css property if I be honest. with it you can use css `scroll()` function to tie an animation with the scroll progress of a scrollable element. here im animating a `mask-image`s size based on the scroll progress with `2rem` of threshold.

i wasn't aware of `animation-timeline` css property if I be honest. with it you can use css `scroll()` function to tie an animation with the scroll progress of a scrollable element. here im animating a `mask-image`s size based on the scroll progress with `2rem` of threshold.

Soren

183,803 просмотров • 7 месяцев назад

"CSS scroll-driven scroll-snapping animations" by Giana Just a ten out of ten absolutely gorgeous example of using these new APIs. Not a line of JavaScript in sight (except a polyfill to make it work more places).

"CSS scroll-driven scroll-snapping animations" by Giana Just a ten out of ten absolutely gorgeous example of using these new APIs. Not a line of JavaScript in sight (except a polyfill to make it work more places).

CodePen.IO

14,856 просмотров • 2 лет назад

curved scrollbar 👨‍🍳 powered by GSAP + CSS scroll-snap + SVG

curved scrollbar 👨‍🍳 powered by GSAP + CSS scroll-snap + SVG

jhey ʕ•ᴥ•ʔ

97,263 просмотров • 1 год назад

Similar technique 🤙 1. Take a scroll-snap list 2. Apply CSS scroll animations ✨ img { animation: flow; animation-timeline: --cover; } keyframes flow { 0% { transform: translate(-80%, 0) rotateY(-33deg); } } Few lines of CSS make it a progressively enhanced animated list 🔥

Similar technique 🤙 1. Take a scroll-snap list 2. Apply CSS scroll animations ✨ img { animation: flow; animation-timeline: --cover; } keyframes flow { 0% { transform: translate(-80%, 0) rotateY(-33deg); } } Few lines of CSS make it a progressively enhanced animated list 🔥

jhey ʕ•ᴥ•ʔ

114,209 просмотров • 2 лет назад

built some 3D css books in the past with scroll interaction and demo links might make a css cookbook 👨‍🍳

built some 3D css books in the past with scroll interaction and demo links might make a css cookbook 👨‍🍳

jhey ʕ•ᴥ•ʔ

59,139 просмотров • 6 месяцев назад

breakin' down how to manipulate time with JavaScript for the next "Craft of UI" issue 🪄 while CSS plays a big part, both the course and newsletter dive into building all kinds of UI it’s all about empowering you to create what you want and need 🤙

breakin' down how to manipulate time with JavaScript for the next "Craft of UI" issue 🪄 while CSS plays a big part, both the course and newsletter dive into building all kinds of UI it’s all about empowering you to create what you want and need 🤙

jhey ▲🐻🎈

37,888 просмотров • 1 год назад

Pinterest moved to native CSS carousels to replace legacy JS platform-wide → Using CSS primitives like scroll markers and snap, they achieved: 📉 90% code reduction (2k JS → 200 CSS) 🚀 15% faster page loads ✨ Smoother, interactive UI

Pinterest moved to native CSS carousels to replace legacy JS platform-wide → Using CSS primitives like scroll markers and snap, they achieved: 📉 90% code reduction (2k JS → 200 CSS) 🚀 15% faster page loads ✨ Smoother, interactive UI

Chrome for Developers

219,485 просмотров • 2 месяцев назад

Can we please stop with the scroll-jacking carousels on websites? CSS Scroll Snap is a much better solution! Re-built the Uniqlo home page with 6 lines of CSS and 4 lines of JS

Sensitive content

Can we please stop with the scroll-jacking carousels on websites? CSS Scroll Snap is a much better solution! Re-built the Uniqlo home page with 6 lines of CSS and 4 lines of JS

Wes Bos

305,109 просмотров • 1 год назад

curved scrollbar: completed it ✅ CSS + SVG to animate stroke-dashoffset combined with scroll-snap

curved scrollbar: completed it ✅ CSS + SVG to animate stroke-dashoffset combined with scroll-snap

jhey ʕ•ᴥ•ʔ

229,714 просмотров • 1 год назад

I recreated the Google Antigravity website with Modern CSS. - Blog post: - Demo: Starting-Style, Houdini PaintWorklet, Scroll-Driven and Scroll-Triggered Animations, sibling-index(), Carousel, Scope, … #CSS

I recreated the Google Antigravity website with Modern CSS. - Blog post: - Demo: Starting-Style, Houdini PaintWorklet, Scroll-Driven and Scroll-Triggered Animations, sibling-index(), Carousel, Scope, … #CSS

Bramus

13,211 просмотров • 6 месяцев назад

Carousels just got a major glow up 💅 New CSS primitives let you build carousels that are interactive at first paint. Easily add native scroll buttons, scroll markers, & scroll snap effects to turn a simple layout into a full story →

Carousels just got a major glow up 💅 New CSS primitives let you build carousels that are interactive at first paint. Easily add native scroll buttons, scroll markers, & scroll snap effects to turn a simple layout into a full story →

Chrome for Developers

46,410 просмотров • 5 месяцев назад

how you take an image list and turn it into a 3D scroll-driven carousel with CSS 🤙

how you take an image list and turn it into a 3D scroll-driven carousel with CSS 🤙

jhey ʕ•ᴥ•ʔ

57,717 просмотров • 1 год назад

Future CSS Tip! 🔮 You can anchor an element to multiple elements with anchor positioning .anchored { top: anchor(--a-1 bottom); left: anchor(--a-2 right); } Combine it with CSS mask to create some "Supercharged CSS ⚡️" Watch the debug below 👀 CodePen.IO link below! 👇

Future CSS Tip! 🔮 You can anchor an element to multiple elements with anchor positioning .anchored { top: anchor(--a-1 bottom); left: anchor(--a-2 right); } Combine it with CSS mask to create some "Supercharged CSS ⚡️" Watch the debug below 👀 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

149,809 просмотров • 2 лет назад

CSS Tip! 🔮 Use scroll-linked animations to create list animations ✨ li { view-timeline: --i inline; } .card { scale: 0.8; animation-timeline: --i; animation: s; animation-delay:cover 40%; animation-end-delay:cover 60%; } keyframes s { 50% { scale:1; }} CodePen.IO link below!👇

CSS Tip! 🔮 Use scroll-linked animations to create list animations ✨ li { view-timeline: --i inline; } .card { scale: 0.8; animation-timeline: --i; animation: s; animation-delay:cover 40%; animation-end-delay:cover 60%; } keyframes s { 50% { scale:1; }} CodePen.IO link below!👇

jhey ʕ•ᴥ•ʔ

110,212 просмотров • 3 лет назад

Struggling to make your UI stand out? CSSnippets – A collection of modern, reusable UI components! ✨Ready-to-use with HTML, CSS, React & Tailwind CSS ✨No frameworks, just pure CSS ✨Clean, minimal, and beautiful 🔗 Explore now: Save it for later! 🔖

Struggling to make your UI stand out? CSSnippets – A collection of modern, reusable UI components! ✨Ready-to-use with HTML, CSS, React & Tailwind CSS ✨No frameworks, just pure CSS ✨Clean, minimal, and beautiful 🔗 Explore now: Save it for later! 🔖

Shefali

22,953 просмотров • 1 год назад

I made an interactive demo showing clamp() in action and comparing it to traditional CSS media queries (link below):

I made an interactive demo showing clamp() in action and comparing it to traditional CSS media queries (link below):

Kyrylo Silin

32,018 просмотров • 1 месяц назад

Future CSS Tip! 🍏 You can create this Apple-style photo scroller by combining CSS scroll-driven animations and CSS scroll-snap 😍 Peep those changing captions 👀 No JS! img { animation: highlight both linear; animation-timeline: view(inline); 👈 Horizontal animation-range: cover 0% cover 50%; 👈 Finish } @ keyframes highlight { 50% { translate: 0 0; scale: var(--starting-scale); 👈 props opacity: var(--starting-opacity); 👈 } 100% { translate: 0 0; scale: 1; opacity: 1; } } Without the animation support, you get a standard unordered list containing some s 🤙 How do we swap the captions though? The "trick" is to use position: absolute on the figcaption and animate their opacity based on the ViewTimeline of their parent list item 😎 figcaption { animation: show both linear; animation-timeline: --list-item; } @ keyframes show { 0%, 45%, 55%, 100% { opacity: 0; } 50% { opacity: 1; } } li { view-timeline-name: --list-item; view-timeline-axis: inline; 👈 important! } The parent of the scroll track uses position: relative so all the captions sit in the middle even though they are in the right place for the markup 🙌 The last bit is the scroll-snap 🤙 Not much to it at all. Wrap the list and make it scrollable. Then add scroll-snap-type .wrapper { scroll-snap-type: x mandatory; overflow-x: scroll; } Then make sure each list item has scroll-snap-align set on it li { scroll-snap-align: center; } That's it! Pretty cool demo to put together and see how to do this stuff with these APIs 🤓 A lot of cool little tricks to pick up for writing your CSS! ⭐️ CodePen.IO link below! 👇

Future CSS Tip! 🍏 You can create this Apple-style photo scroller by combining CSS scroll-driven animations and CSS scroll-snap 😍 Peep those changing captions 👀 No JS! img { animation: highlight both linear; animation-timeline: view(inline); 👈 Horizontal animation-range: cover 0% cover 50%; 👈 Finish } @ keyframes highlight { 50% { translate: 0 0; scale: var(--starting-scale); 👈 props opacity: var(--starting-opacity); 👈 } 100% { translate: 0 0; scale: 1; opacity: 1; } } Without the animation support, you get a standard unordered list containing some s 🤙 How do we swap the captions though? The "trick" is to use position: absolute on the figcaption and animate their opacity based on the ViewTimeline of their parent list item 😎 figcaption { animation: show both linear; animation-timeline: --list-item; } @ keyframes show { 0%, 45%, 55%, 100% { opacity: 0; } 50% { opacity: 1; } } li { view-timeline-name: --list-item; view-timeline-axis: inline; 👈 important! } The parent of the scroll track uses position: relative so all the captions sit in the middle even though they are in the right place for the markup 🙌 The last bit is the scroll-snap 🤙 Not much to it at all. Wrap the list and make it scrollable. Then add scroll-snap-type .wrapper { scroll-snap-type: x mandatory; overflow-x: scroll; } Then make sure each list item has scroll-snap-align set on it li { scroll-snap-align: center; } That's it! Pretty cool demo to put together and see how to do this stuff with these APIs 🤓 A lot of cool little tricks to pick up for writing your CSS! ⭐️ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

232,131 просмотров • 2 лет назад

My Portfolio is live! At least the first Version. For now only in German. English will be added later. Didn't finished everything I wanted, but this will be a work in progress. Not everything is accessible. Didn't added all Figma Layouts yet. But it's enough to launch it now, so I can happily go to vacation 🙂 ⚙️ Tech Stack: Webflow (Webflow) GSAP (GSAP) (Core, CustomEase) Locomotive Scroll v5 (Locomotive®) Osmo (Osmo) (Mouse Follower) Custom CSS & JS The coolest part is that I documented everything inside my social media profiles. X: 150 Posts LinkedIn: 90 Posts Instagram: 23 Posts All Posts from just one Project. This Project was also a big learning playground for me. I don't really did much animation stuff before, didn't really used GSAP or Locomotive Scroll. Added so many modules where I actually didn't know how to build it first. And this shows how much you can learn by just building stuff. Especially stuff where you don't know at first how to build it. Fun fact: I call it always Portfolio, but there are no projects. It's because I don't have any yet which shows what Websites I want to make. Therefore this Site should speak for itself for now. Check it out live! 🔗Link in the comments.

My Portfolio is live! At least the first Version. For now only in German. English will be added later. Didn't finished everything I wanted, but this will be a work in progress. Not everything is accessible. Didn't added all Figma Layouts yet. But it's enough to launch it now, so I can happily go to vacation 🙂 ⚙️ Tech Stack: Webflow (Webflow) GSAP (GSAP) (Core, CustomEase) Locomotive Scroll v5 (Locomotive®) Osmo (Osmo) (Mouse Follower) Custom CSS & JS The coolest part is that I documented everything inside my social media profiles. X: 150 Posts LinkedIn: 90 Posts Instagram: 23 Posts All Posts from just one Project. This Project was also a big learning playground for me. I don't really did much animation stuff before, didn't really used GSAP or Locomotive Scroll. Added so many modules where I actually didn't know how to build it first. And this shows how much you can learn by just building stuff. Especially stuff where you don't know at first how to build it. Fun fact: I call it always Portfolio, but there are no projects. It's because I don't have any yet which shows what Websites I want to make. Therefore this Site should speak for itself for now. Check it out live! 🔗Link in the comments.

Eduard Bodak

49,369 просмотров • 1 год назад

Future CSS Tip! 🔮 You can power micro-interactions with scroll driven animations 😎 Define a range with custom props and hook up to body scroll 📜 .avatar{ animation:shrink; animation-timeline:scroll(root); animation-range:calc(var(--head)*0.9) ...; } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

146,987 просмотров • 3 лет назад