Video yükleniyor...

Video Yüklenemedi

Bu video yüklenirken bir sorun oluştu. Bu geçici bir ağ sorunundan kaynaklanıyor olabilir veya video kullanılamıyor olabilir.

Ana Sayfaya Dön

Weather App’s Style Sticky Scroll Section Using SwiftUI

Kavsoft

28,796 subscribers

33,474 görüntüleme • 3 gün önce •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

Let’s recreate Apple Books Scroll Animation using SwiftUI, for more 👇

Let’s recreate Apple Books Scroll Animation using SwiftUI, for more 👇

Kavsoft

43,556 görüntüleme • 1 yıl önce

Disappearing Scroll Header Using SwiftUI NOTES: Inspired from the Instagram App!

Disappearing Scroll Header Using SwiftUI NOTES: Inspired from the Instagram App!

Kavsoft

19,788 görüntüleme • 18 gün önce

iOS Style Permission Animation Using SwiftUI | OnBoarding | KeyFrames

iOS Style Permission Animation Using SwiftUI | OnBoarding | KeyFrames

Kavsoft

29,665 görüntüleme • 3 ay önce

Apple-Style OnBoarding Page With Animations Using SwiftUI

Apple-Style OnBoarding Page With Animations Using SwiftUI

Kavsoft

27,666 görüntüleme • 11 ay önce

Building Scrollable Tab View Using SwiftUI | Instagram Profile Scroll Tab View | iOS 18+ | Xcode 16

Kavsoft

18,212 görüntüleme • 1 yıl önce

Container scroll-state queries let you apply styles to elements based on the container's scroll state — stuck, snapped, or scrollable👇 .section-header { ... container-type: scroll-state; container-name: sticky-hd; } @ container sticky-hd scroll-state(stuck: top) { ... } #CSS

Container scroll-state queries let you apply styles to elements based on the container's scroll state — stuck, snapped, or scrollable👇 .section-header { ... container-type: scroll-state; container-name: sticky-hd; } @ container sticky-hd scroll-state(stuck: top) { ... } #CSS

Bharat Kara

26,535 görüntüleme • 1 ay önce

my upcoming wikipedia app’s loading screen & the swiftui tool i built to determine the animation’s values

my upcoming wikipedia app’s loading screen & the swiftui tool i built to determine the animation’s values

Vincent van der Meulen

108,195 görüntüleme • 1 yıl önce

CSS Scroll-driven knockout text using SVG filter 🥊 section { filter: url(#knockout); } section h1 { animation: shrink; } @keyframes shrink { 0% { scale: 36; }} Animate text scale on a video overlay ✅ Knock out text using SVG filter ✅ Drive with scroll ✅

CSS Scroll-driven knockout text using SVG filter 🥊 section { filter: url(#knockout); } section h1 { animation: shrink; } @keyframes shrink { 0% { scale: 36; }} Animate text scale on a video overlay ✅ Knock out text using SVG filter ✅ Drive with scroll ✅

jhey ʕ•ᴥ•ʔ

100,075 görüntüleme • 1 yıl önce

Resizable ScrollView Header | Scroll To Hide Header | SwiftUI | iOS 18+

Resizable ScrollView Header | Scroll To Hide Header | SwiftUI | iOS 18+

Kavsoft

11,916 görüntüleme • 1 yıl önce

SwiftUI got another super nice API in iOS 17: Scroll Transitions!

SwiftUI got another super nice API in iOS 17: Scroll Transitions!

Flo writes Code

93,466 görüntüleme • 2 yıl önce

Recreated using SwiftUI✌️

Recreated using SwiftUI✌️

Kavsoft

77,003 görüntüleme • 1 ay önce

CSS picture-in-picture video transition using container queries + position: sticky 🧑‍🍳 .container { container-type: scroll-state; } @container scroll-state(stuck: top) { video { translate: calc(50vw - 100%) calc(100vh - 100%); } }

CSS picture-in-picture video transition using container queries + position: sticky 🧑‍🍳 .container { container-type: scroll-state; } @container scroll-state(stuck: top) { video { translate: calc(50vw - 100%) calc(100vh - 100%); } }

jhey ʕ•ᴥ•ʔ

138,071 görüntüleme • 1 yıl önce

CSS Tip! 📜 You could create a sticky popout bento effect with position: sticky and scroll-driven animation 🤩 The trick is to use position: sticky with bottom instead of top like we would usually 🤙 Then we can use scroll-driven animation as a progressive enhancement to fade things and move the phone around ✨ section { view-timeline-name: --section; } .phone { scale: 1.5; translate: 30% 0; animation-name: slip, slide; 👈 2 scroll animations animation-timing-function: linear; animation-fill-mode: both; animation-range: 👈 2 ranges entry 50% entry 60%, exit 10% exit 25%; animation-timeline: --section; } keyframes slip { to { translate: -5% 0; scale: 1 } } keyframes slide { to { translate: -5% 30%; } } If scroll-driven animations aren't supported, we still provide a neat effect using position: sticky alone 😎 The trick to that is having an absolutely positioned card that comes up from beneath the phone image and gives the illusion that they're joined. But, they aren't! CodePen.IO link below! 👇 cc Aaron Stezycki

CSS Tip! 📜 You could create a sticky popout bento effect with position: sticky and scroll-driven animation 🤩 The trick is to use position: sticky with bottom instead of top like we would usually 🤙 Then we can use scroll-driven animation as a progressive enhancement to fade things and move the phone around ✨ section { view-timeline-name: --section; } .phone { scale: 1.5; translate: 30% 0; animation-name: slip, slide; 👈 2 scroll animations animation-timing-function: linear; animation-fill-mode: both; animation-range: 👈 2 ranges entry 50% entry 60%, exit 10% exit 25%; animation-timeline: --section; } keyframes slip { to { translate: -5% 0; scale: 1 } } keyframes slide { to { translate: -5% 30%; } } If scroll-driven animations aren't supported, we still provide a neat effect using position: sticky alone 😎 The trick to that is having an absolutely positioned card that comes up from beneath the phone image and gives the illusion that they're joined. But, they aren't! CodePen.IO link below! 👇 cc Aaron Stezycki

jhey ʕ•ᴥ•ʔ

341,765 görüntüleme • 2 yıl önce

Recreated using SwiftUI. For More 👇

Recreated using SwiftUI. For More 👇

Kavsoft

22,321 görüntüleme • 1 yıl önce

Sticky notes in SwiftUI using TransitionStyle.pageCurl. The page curl effect is meant to be used fullscreen so it took some fidgeting to get it working at a smaller size.

Sticky notes in SwiftUI using TransitionStyle.pageCurl. The page curl effect is meant to be used fullscreen so it took some fidgeting to get it working at a smaller size.

Todd Hamilton

27,973 görüntüleme • 6 ay önce

iOS Photos App Style Transitions Using SwiftUI NOTES: 1. The transition is not an overlay but a full-screen cover. 2. The paging is done using Page Tab View, not ScrollView.

iOS Photos App Style Transitions Using SwiftUI NOTES: 1. The transition is not an overlay but a full-screen cover. 2. The paging is done using Page Tab View, not ScrollView.

Kavsoft

13,654 görüntüleme • 3 ay önce

User OnBoarding Tutorial Animations Using SwiftUI | Xcode

User OnBoarding Tutorial Animations Using SwiftUI | Xcode

Kavsoft

20,395 görüntüleme • 10 ay önce

New Xcode's OnBoarding Animation Effect Using SwiftUI

New Xcode's OnBoarding Animation Effect Using SwiftUI

Kavsoft

36,939 görüntüleme • 4 ay önce

X App's New Slide Out Menu Using SwiftUI

X App's New Slide Out Menu Using SwiftUI

Kavsoft

56,094 görüntüleme • 1 ay önce

VoiceMemos Waveform Audio Scrubber Using SwiftUI | Waveform Visualization

VoiceMemos Waveform Audio Scrubber Using SwiftUI | Waveform Visualization

Kavsoft

14,345 görüntüleme • 1 yıl önce