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

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

На главную

With the new iOS 17 scroll view APIs, we can create a scroll animation like this with just a few lines of code. For more, check out the video👇

_Kavsoft's profile picture

Kavsoft

29,238 subscribers

156,612 просмотров • 2 лет назад •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

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

Фото профиля Kaevin
Kaevin2 лет назад

This is crazy 🤯

Фото профиля mr asante 🇬🇭
mr asante 🇬🇭2 лет назад

So fluid 🥹🥹

Фото профиля Diana 🏴
Diana 🏴2 лет назад

Nice! I have to try it 😊

Фото профиля WAGMI
WAGMI2 лет назад

Gotta try this

Фото профиля Mr. Eyram🖤
Mr. Eyram🖤2 лет назад

@oniicode check this out

Фото профиля interplato
interplato2 лет назад

Can css do this?

Фото профиля Maciej Królikowski
Maciej Królikowski2 лет назад

@olgikrolik check it out🔥

Фото профиля Eric 🇺🇸
Eric 🇺🇸2 лет назад

Can we do this pre iOS 17

Фото профиля Cyclebrity
Cyclebrity2 лет назад

Hopefully Apple releases FinanceKit to integrate with banks and credit cards worldwide 💯

Фото профиля Alex
Alex2 лет назад

check it out

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

In iOS 18, we can effortlessly extract the subview collection from a given View using the Group or ForEach structs. This new feature simplifies the process of creating Looped Stack cards like this video, for more check this out 👇
0:34

In iOS 18, we can effortlessly extract the subview collection from a given View using the Group or ForEach structs. This new feature simplifies the process of creating Looped Stack cards like this video, for more check this out 👇

Kavsoft

32,265 просмотров • 1 год назад

We have a new Youtube video from #SpaceX where you can scroll around to watch the launch tower view wherever you like (a 360 degree vid). 🤯Check this out! 🚀
0:37

We have a new Youtube video from #SpaceX where you can scroll around to watch the launch tower view wherever you like (a 360 degree vid). 🤯Check this out! 🚀

Marcus House

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

Card stack using scroll-driven animation w/ snapping. Just a few lines of JS, zero dependencies. Code + demo via CodePen.IO
0:22

Card stack using scroll-driven animation w/ snapping. Just a few lines of JS, zero dependencies. Code + demo via CodePen.IO

Paul Noble

84,128 просмотров • 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
2:35

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,482 просмотров • 1 год назад

You can create CSS-only scroll indicators without new APIs 🤙 .scroller { background: var(--cover) local, var(--shadow) scroll; } background-attachment: local makes a background scroll with its content. Use that to cover a shadow ⭐️ Neat little trick! 🫶
0:24

You can create CSS-only scroll indicators without new APIs 🤙 .scroller { background: var(--cover) local, var(--shadow) scroll; } background-attachment: local makes a background scroll with its content. Use that to cover a shadow ⭐️ Neat little trick! 🫶

jhey ʕ•ᴥ•ʔ

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

Create engaging, scrolly-telling experiences with just a single line of CSS ✨ The new Scroll-Triggered Animations feature lets you trigger an animation when an element scrolls into view, delivering high performance with ease →
1:29

Create engaging, scrolly-telling experiences with just a single line of CSS ✨ The new Scroll-Triggered Animations feature lets you trigger an animation when an element scrolls into view, delivering high performance with ease →

Chrome for Developers

37,772 просмотров • 9 месяцев назад

Scroll snap + scroll driven animation carousel 💡 in the mobile size it looks a lot like the iOS app switcher eh? try it!?
0:28

Scroll snap + scroll driven animation carousel 💡 in the mobile size it looks a lot like the iOS app switcher eh? try it!?

Adam Argyle

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

With the new scrambleText() feature, you can control reveal direction, create cursor effects, apply perturbation and easing, and chain it in keyframes and timelines like any other Anime.js animation property. It's crazy how just a few lines of code can create such visually complex effects.
0:41

With the new scrambleText() feature, you can control reveal direction, create cursor effects, apply perturbation and easing, and chain it in keyframes and timelines like any other Anime.js animation property. It's crazy how just a few lines of code can create such visually complex effects.

Julian Garnier

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

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.
0:34

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

184,850 просмотров • 11 месяцев назад

"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).
0:40

"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 лет назад

🔊 New Stripe animation just dropped! A sticky scroll collab for the homepage with @CaddickYo Billy Hoffman Emma Bryson and @Clonk801
0:49

🔊 New Stripe animation just dropped! A sticky scroll collab for the homepage with @CaddickYo Billy Hoffman Emma Bryson and @Clonk801

Jonnie Hallman

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

you can create this dynamic mask using a progressive CSS scroll-driven animation 🧑‍🍳 the gist 👇 input { animation: in; animation-timeline: scroll(self inline); animation-range: 0 6ch; mask-position: 0 0; } @​keyframes in { 0% { mask-position: -6ch 0; }}
0:39

you can create this dynamic mask using a progressive CSS scroll-driven animation 🧑‍🍳 the gist 👇 input { animation: in; animation-timeline: scroll(self inline); animation-range: 0 6ch; mask-position: 0 0; } @​keyframes in { 0% { mask-position: -6ch 0; }}

jhey ʕ•ᴥ•ʔ

126,068 просмотров • 1 год назад

We worked with OpenAI to build a native integration for the OpenAI Agents SDK. Today, we are very excited to launch as a tracing processor. With just a few lines of code, you can trace all your agent workflows and debug them much faster. Check out this quick demo to get started:
0:49

We worked with OpenAI to build a native integration for the OpenAI Agents SDK. Today, we are very excited to launch as a tracing processor. With just a few lines of code, you can trace all your agent workflows and debug them much faster. Check out this quick demo to get started:

Respan

58,179 просмотров • 1 год назад

Building Scrollable Tab View With New iOS 17 API's - Xcode 15 For more 👇
0:21

Building Scrollable Tab View With New iOS 17 API's - Xcode 15 For more 👇

Kavsoft

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

Future CSS Tip! 📜 You can create these landing page effects with CSS scroll-driven animations and zero JavaScript 🔥 Blurred text on exit? 👀 @​keyframes fade { to { opacity: 0; filter: blur(2rem); } } h2 { animation: fade; animation-timeline: view(); animation-range: cover 40% cover 85%; } Lots of treats in this one! ✨ How about the circular shape on scroll? That's an animated clip-path 😮 @​keyframes unclip { to { clip-path: ellipse(220% 200% at 50% 175%); } } Create a clip-path with a large size that's offset vertically. On scroll, animate it in ⭐️ .content { clip-path: ellipse(220% 200% at 50% 300%); animation: unclip both linear; animation-timeline: --article; animation-range: entry; } That second section combines unclipping with scaling down an image at the same time 🤓 Using the same animation-timeline 🫶 @​keyframes scale-down { 0% { scale: 5; } } img { animation: scale-down; animation-timeline: --article; 👈 animation-range: entry; } Every section gets a scoped view-timeline of --article. That's scoped so we can reuse it for all the animations we need 🙌 article { view-timeline-name: --article; } Honestly, the more you play with this stuff, the more tricks you will find 💯 And it also makes you think "Wow! CSS can do this!" As always, CodePen.IO link below! 👇
0:56

Future CSS Tip! 📜 You can create these landing page effects with CSS scroll-driven animations and zero JavaScript 🔥 Blurred text on exit? 👀 @​keyframes fade { to { opacity: 0; filter: blur(2rem); } } h2 { animation: fade; animation-timeline: view(); animation-range: cover 40% cover 85%; } Lots of treats in this one! ✨ How about the circular shape on scroll? That's an animated clip-path 😮 @​keyframes unclip { to { clip-path: ellipse(220% 200% at 50% 175%); } } Create a clip-path with a large size that's offset vertically. On scroll, animate it in ⭐️ .content { clip-path: ellipse(220% 200% at 50% 300%); animation: unclip both linear; animation-timeline: --article; animation-range: entry; } That second section combines unclipping with scaling down an image at the same time 🤓 Using the same animation-timeline 🫶 @​keyframes scale-down { 0% { scale: 5; } } img { animation: scale-down; animation-timeline: --article; 👈 animation-range: entry; } Every section gets a scoped view-timeline of --article. That's scoped so we can reuse it for all the animations we need 🙌 article { view-timeline-name: --article; } Honestly, the more you play with this stuff, the more tricks you will find 💯 And it also makes you think "Wow! CSS can do this!" As always, CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

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

🚨We have a new music video out!!🚨 Inspired by the #fnaf2movie, we had the great honor of working with FabvL to create a #FNaF game duology animation for their newest song! Please check it out!
0:20

🚨We have a new music video out!!🚨 Inspired by the #fnaf2movie, we had the great honor of working with FabvL to create a #FNaF game duology animation for their newest song! Please check it out!

BLIND-SP0T

66,062 просмотров • 10 месяцев назад

It's here. Meet the new #GalaxyWatch6, with more space to view, tap, swipe and scroll. #SamsungUnpacked​ Learn more:
1:45

It's here. Meet the new #GalaxyWatch6, with more space to view, tap, swipe and scroll. #SamsungUnpacked​ Learn more:

Samsung Mobile

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