Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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 görüntüleme • 2 yıl önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

10 Yorum

Kaevin profil fotoğrafı
Kaevin2 yıl önce

This is crazy 🤯

mr asante 🇬🇭 profil fotoğrafı
mr asante 🇬🇭2 yıl önce

So fluid 🥹🥹

Diana 🏴 profil fotoğrafı
Diana 🏴2 yıl önce

Nice! I have to try it 😊

WAGMI profil fotoğrafı
WAGMI2 yıl önce

Gotta try this

Mr. Eyram🖤 profil fotoğrafı
Mr. Eyram🖤2 yıl önce

@oniicode check this out

interplato profil fotoğrafı
interplato2 yıl önce

Can css do this?

Maciej Królikowski profil fotoğrafı
Maciej Królikowski2 yıl önce

@olgikrolik check it out🔥

Eric 🇺🇸 profil fotoğrafı
Eric 🇺🇸2 yıl önce

Can we do this pre iOS 17

Cyclebrity profil fotoğrafı
Cyclebrity2 yıl önce

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

Alex profil fotoğrafı
Alex2 yıl önce

check it out

Benzer Videolar

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 görüntüleme • 1 yıl önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 9 ay önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 5 ay önce

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 görüntüleme • 11 ay önce

"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 görüntüleme • 2 yıl önce

🔊 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 görüntüleme • 3 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 2 yıl önce

🚨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 görüntüleme • 10 ay önce

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 görüntüleme • 3 yıl önce