Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

With the new scrollPosition, scrollPhase, and scrollGeometry modifiers, we can now create a scrollable tab bar similar to the one found in Instagram’s Profile Layout. Note: The primary paging view is a horizontal scroll view, and each page view is an individual vertical scroll view.

_Kavsoft's profile picture

Kavsoft

25,654 subscribers

13,867 Aufrufe • vor 1 Jahr •via X (Twitter)

BildungWissenschaft & TechnologieKunst
LIVE

Anya Rossi• Live Now

Private livecam show

5 Kommentare

Profilbild von Aleksandr Chichkanov
Aleksandr Chichkanovvor 1 Jahr

I am curious. Since you mention that the paging view is a horizontal scroll view, it means that the header area won’t be scrollable? This seems to be pretty important for apps like instagram, where the header can be pretty big

Profilbild von Aleksandr Chichkanov
Aleksandr Chichkanovvor 1 Jahr

That’s amazing. However, I think the main problem of all the implementations of this behavior in SwiftUI is that tabs content is not “lazy”, usually it’s just a vstack. Which is rarely usable in a real app like instagram. Really excited to see what you came up with.

Profilbild von Adriano Ferreira
Adriano Ferreiravor 1 Jahr

Can this be used to replicate Family app tab bar?

Profilbild von Cory Bunge
Cory Bungevor 1 Jahr

when is this video coming out?

Profilbild von Pramod Shukla 🚩
Pramod Shukla 🚩vor 1 Jahr

Full video

Ähnliche Videos

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

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

Kavsoft

18,031 Aufrufe • vor 1 Jahr

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👇
0:32

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

156,039 Aufrufe • vor 2 Jahren

Some updates to make your life easier: - Adjust the number of moves that appear per page - Compact view for easy accessibility - Scroll position saves for better page navigation Also, you can now view the number of upvotes, downvotes, and comments on specific moves
0:33

Some updates to make your life easier: - Adjust the number of moves that appear per page - Compact view for easy accessibility - Scroll position saves for better page navigation Also, you can now view the number of upvotes, downvotes, and comments on specific moves

Okizeme.gg

22,026 Aufrufe • vor 9 Monaten

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,180 Aufrufe • vor 2 Jahren

Perfect web scroll animations with ease! → Explore performant, declarative Scroll-driven Animations with WAAPI, CSS, and Scroll and View Progress Timelines.
0:48

Perfect web scroll animations with ease! → Explore performant, declarative Scroll-driven Animations with WAAPI, CSS, and Scroll and View Progress Timelines.

Chrome for Developers

10,722 Aufrufe • vor 1 Jahr

NEW updates to the Chase Archive 1/ Evolution of soundings over time: scroll through the slider to watch how the environment evolves through the morning and afternoon up to the event. This initial rollout will only include the priority cases (marked with an orange dot 🟠) 2/ New map: we now offer a cases view (which is the new default) and the original heatmap view which you can toggle on the top-right of the map pane. You can also choose to show counties. The styling of the map has also been improved. 3/ Location label: the location and approximate time of the event now shows up on the radar/satellite view. 4/ Added some bugfixes on the upper-air maps and mobile view Preview of the updates below:
0:25

NEW updates to the Chase Archive 1/ Evolution of soundings over time: scroll through the slider to watch how the environment evolves through the morning and afternoon up to the event. This initial rollout will only include the priority cases (marked with an orange dot 🟠) 2/ New map: we now offer a cases view (which is the new default) and the original heatmap view which you can toggle on the top-right of the map pane. You can also choose to show counties. The styling of the map has also been improved. 3/ Location label: the location and approximate time of the event now shows up on the radar/satellite view. 4/ Added some bugfixes on the upper-air maps and mobile view Preview of the updates below:

Storm Chase Archive

18,772 Aufrufe • vor 6 Monaten

Site updated. New: - Feed page: View the latest mods and blogs (and social posts) of who you're following - Social posting: The ability to post 'short' posts - The 'Posts' tab in a user's profile now works, showcasing the latest social posts of the current user
1:53

Site updated. New: - Feed page: View the latest mods and blogs (and social posts) of who you're following - Social posting: The ability to post 'short' posts - The 'Posts' tab in a user's profile now works, showcasing the latest social posts of the current user

DEG Mods

32,873 Aufrufe • vor 1 Jahr

Nice blur transition to expose the CoT without overwhelming the conversation scroll view.
0:20

Nice blur transition to expose the CoT without overwhelming the conversation scroll view.

Gavin Nelson

152,378 Aufrufe • vor 1 Jahr

Obsidian 1.9.3 (early access) is now available for desktop and mobile, with more improvements to Bases: - New Cards view lets you display files in a grid layout - "New item" button creates a file that matches filters of the current view - Sort menu lets you easily sort items
0:25

Obsidian 1.9.3 (early access) is now available for desktop and mobile, with more improvements to Bases: - New Cards view lets you display files in a grid layout - "New item" button creates a file that matches filters of the current view - Sort menu lets you easily sort items

Obsidian

59,194 Aufrufe • vor 11 Monaten

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,702 Aufrufe • vor 5 Monaten

View from the…View Bar.
1:02

View from the…View Bar.

Joe Ovies

27,626 Aufrufe • vor 3 Monaten

This is, in my opinion, what the iOS 18 Mail redesign should have looked like. Fully gesture driven, fluid and interruptible animations for the new category view. The category view is also contained inside a navigation bar palette for easier access. Built with Swift and UIKit.
0:31

This is, in my opinion, what the iOS 18 Mail redesign should have looked like. Fully gesture driven, fluid and interruptible animations for the new category view. The category view is also contained inside a navigation bar palette for easier access. Built with Swift and UIKit.

Seb Vidal

46,119 Aufrufe • vor 1 Jahr

How to see pantsu of your favourite character in NTE nya (For all gooner gamers): 1. Vertical View nya: Spawn motorcycle -> Press F (Drive) -> Face upward -> Press F -> While getting off the motorcycle, face to the sky -> Bottom top view nya 2. Horizontal View nya: Teleport to the phone booth in front of the 'Black Tome' in 'New Herland District' -> Walk towards the convenience store -> There will be 2 maids waiting -> Walk up the stairs and press 'X' against the front wall -> Slowly walk backwards one step at a time until it changes to 3rd person view nya -> Horizontal view nya [Special thanks for Uncle Sam to sharing this info nya...?]
0:58

How to see pantsu of your favourite character in NTE nya (For all gooner gamers): 1. Vertical View nya: Spawn motorcycle -> Press F (Drive) -> Face upward -> Press F -> While getting off the motorcycle, face to the sky -> Bottom top view nya 2. Horizontal View nya: Teleport to the phone booth in front of the 'Black Tome' in 'New Herland District' -> Walk towards the convenience store -> There will be 2 maids waiting -> Walk up the stairs and press 'X' against the front wall -> Slowly walk backwards one step at a time until it changes to 3rd person view nya -> Horizontal view nya [Special thanks for Uncle Sam to sharing this info nya...?]

Kaemiya

98,349 Aufrufe • vor 21 Tagen

A really cool feature of the View Transitions API (available now in stable Chrome!) is that videos and animations on the new view continue to play smoothly while transitioning. With a bit of extra JavaScript, you can even do this with elements shared across different routes ✨
0:32

A really cool feature of the View Transitions API (available now in stable Chrome!) is that videos and animations on the new view continue to play smoothly while transitioning. With a bit of extra JavaScript, you can even do this with elements shared across different routes ✨

Maxi Ferreira

351,226 Aufrufe • vor 3 Jahren

The Terrace View, a social bar area with great food & drink, as well as a view out of the Holte terrace and through to the pitch at Villa Park! 🤩
0:57

The Terrace View, a social bar area with great food & drink, as well as a view out of the Holte terrace and through to the pitch at Villa Park! 🤩

Aston Villa

3,198,918 Aufrufe • vor 2 Jahren

View Transitions now work almost perfectly in Safari Tech Preview. In this recording, you see a mobile view of What PWA Can Do Today to simulate what it would look like on iOS once support also lands there. The "flip" animation doesn't work as expected yet since the page is flipped in the wrong direction on a back navigation. Another issue is the scroll positions of the views when the page is not scrolled to the top. In Chrome this is taken care of by the "scroll" option of the Navigation API which is not yet functional in Safari TP. More details in the upcoming edition of Modern Web Weekly. Subscribe link 👇
0:28

View Transitions now work almost perfectly in Safari Tech Preview. In this recording, you see a mobile view of What PWA Can Do Today to simulate what it would look like on iOS once support also lands there. The "flip" animation doesn't work as expected yet since the page is flipped in the wrong direction on a back navigation. Another issue is the scroll positions of the views when the page is not scrolled to the top. In Chrome this is taken care of by the "scroll" option of the Navigation API which is not yet functional in Safari TP. More details in the upcoming edition of Modern Web Weekly. Subscribe link 👇

Danny Moerkerke

38,803 Aufrufe • vor 2 Jahren

Karbala: The Sunni Narrative. It is now available to view. Follow the link in the comments to view the complete seminar.
1:40

Karbala: The Sunni Narrative. It is now available to view. Follow the link in the comments to view the complete seminar.

Adnan Rashid

12,492 Aufrufe • vor 10 Monaten

PS5’s new Showcase Mode is one of the best updates we’ve had in a long time. You can add your favorite GTA 6 screenshots and create a full view slideshow.
1:37

PS5’s new Showcase Mode is one of the best updates we’ve had in a long time. You can add your favorite GTA 6 screenshots and create a full view slideshow.

GTA 6 Countdown ⏳

194,471 Aufrufe • vor 2 Monaten

The view that the Fourteenth Amendment confers citizenship to literally anyone born on U.S. soil is a recent view, and one contrary to the views at the time the amendment was written and ratified.
2:38

The view that the Fourteenth Amendment confers citizenship to literally anyone born on U.S. soil is a recent view, and one contrary to the views at the time the amendment was written and ratified.

Senator Ted Cruz

164,844 Aufrufe • vor 2 Monaten

The Garden is turning orange — You can now buy, list and view Runes on Magic Eden with our new Beta program. Today we’re introducing Runes Table View: a customizable buying experience allowing you to control lot sizes and price selection. Filter by price and size, find the right one for you and buy. Simple as that. We also have Swaps View coming soon. Literally just put the amount of BTC you want to spend and we’ll find the best option in a single click. Ordinals and now Runes. The future of BTC is on Magic Eden.
0:50

The Garden is turning orange — You can now buy, list and view Runes on Magic Eden with our new Beta program. Today we’re introducing Runes Table View: a customizable buying experience allowing you to control lot sizes and price selection. Filter by price and size, find the right one for you and buy. Simple as that. We also have Swaps View coming soon. Literally just put the amount of BTC you want to spend and we’ll find the best option in a single click. Ordinals and now Runes. The future of BTC is on Magic Eden.

Magic Eden 🪄

598,040 Aufrufe • vor 2 Jahren