iOS Swift Tutorial: Awesome Interactive Card View Animation with UIPropertyAnimator

[@pebiwhiper4616]

Thanks Brian, I'm an iOS developer here in Brazil and I'm learning a lot from your videos. Thanks for sharing and please continue with animations!

[@coderacjhp9282]

For fixing inaccessible problem with main view : 1- Hide visualEffectView after adding it as a subview to view (inside setupCardView method) 2- Show it in "animateTransitionIfNeeded -> frameAnimator -> case .expanded:" 3- Add this method below of "runningAnimations.append(blurAnimator)" blurAnimator.addCompletion { (_) in if state == .collapsed { self.visualEffectView.isHidden = true } } And that's it, your main view has been accessible. Happy coding..

[@sujal1208]

Thank you. Holy fucking shit, I wasted two days figuring out how to implement the other code from another comment (which wasn't working) until I saw your comment. Holy, wow. just wow. Thank you.

[@guitaripod]

Thanks

[@MrAnonymous-j6l]

Thank you, this is so helpful, but the problem is that once I implement this feature I will never be able to interact with any components that are located at the Main View Controller (The Pumpkins View Controller)

[@pratikgajbhiye5354]

kitna Sara Coding karta hai bhai tu...boht talented hai tu....

[@cyangineer]

They added this API 2 years ago and I'm just now learning about this!? 🤯

[@andrerussian4016]

yeah , this is a really awesome video

[@mohamedosama6697]

Amazing work Brian , thank you

[@sreehari4219]

@Brian Advent You missed the case that, in collapsed state, i pull up and pull down at the pan end. Then the cardViewController should remain collapsed.

[@_deepak_joshi]

I just found this bug, do you know how to fix this ?

[@cleanrunyt]

awesome tutorial, thanks a lot!

[@yutaranova]

Brian, it is a really awesome tutorial, thank you so much! Please, do more about property animator!)

[@Emoryz]

It would be great to update this tutorial to show how this works in SwiftUI - any plans to do a video on this?

[@takasurazeem]

User interaction gets disabled on the parent view controller, how to fix that? Solution: self.visualEffectView.removeFromSuperview() self.cardViewController.view.removeFromSuperview() self.cardViewController.removeFromParent()

[@mujtubaamin360]

Where we have to place this code?

[@takasurazeem]

@@mujtubaamin360 where you need that to be removed or just simply disable and enable user interaction on the FX Layer.

[@mohamedosama6697]

you saved my day bro really thank you

[@takasurazeem]

@@mohamedosama6697 you can play with user interactivity property too.

[@joandaa]

@@vrushabhrupala8663 I am so late, but heres the solution to that visualEffectView.isUserInteractionEnabled = false

[@jimenaleonbm]

Thanks Brian, I have a question, How can I interact with first ViewController? , where you have the background of the pumpkins if I want to add a button this doesn't work.

[@rodrigobuendiaramos3076]

Were you able to figure it out? I have the same problem.

[@bitsnbytes398]

it's too late for reply but visualEffectView.isUserInteractionEnabled false and true work for me

[@enochjohnson]

@@bitsnbytes398 How would you do that?

[@bitsnbytes398]

@@enochjohnson in viewdidappear write this line. self.visualEffectView.isUserInteractionEnabled = true when collapsed call self.uibutton.isUserInteractionEnabled = true

[@tolulopeaboyeji5373]

SyedMUmer Sajjad thanks

[@DannyBoy443]

Why did you use a ternary operator for cardVisible return? And why did you put . infront of collapsed and expanded? I'm new to Swift so I'm learning. Thanks

[@noobmaster3k]

It's worked really well but as soon as we add it into tab bar controller it broke, how do we fix it?

[@danielprast]

What an amazing tutorial, thanks! 👍

[@marioguerrero1311]

Bryan, How do you know that much? I don't wanna sound rude but I have been learning day in day out from one year now and this seems to be endlessly, do you follow any special books or any straightforward documentation? I really would like to know it, because I notice it's better to know how the system works instead of making learning tutorials forever and ever.

[@MD-S282]

Hi Brian, I love your videos, thank you for your clarity. Just wondering if you could show some more features of the Charts framework? Also, I'm not sure if you've done this already, but would you be able to explain how to take content from an image view (or Chart view) and export to pdf and/or attach to email? Thank you!

[@DiegoAlejandroArizaMedina]

⭐️⭐️⭐️⭐️⭐️ What a great video and material, thank you very much for this video, I want to ask you what should be modified so that the "CardViewController.xib" does not occupy the full width of the screen.?

[@clintonbissong5723]

Hello Brian, i just watched your tutorial now and applied it on a mapView and after that the mapView became inactive, u can seem to do anything on it, i guess its blc theres a new view added on it, can you help me solve this issue please.

[@jeanmif]

Hello, I have followed step by step your explanations, and the func cornerRadiusAnimator doesn't work and I get an Optional error that appears with the func blurAnimator, because on case .expanded I receive first a nil. how can i fix that? many thanks for the help.

[@forrestanderson2885]

Excellent tutorial. Thank you.

[@huyopen]

great tutorial

[@seanperez9249]

Great video! Thanks! Please read the Swift Style Guide though to improve your formatting. It will greatly help my OCD while watching you code lol.

[@RAMSESmusicofficial]

I thing that using fractionComplete is a pretty bad way to make card view. I have a better way, with pan gesture recognizer you can change y position of card view and depending on that position trigger animation when pan gesture ended. For example, when card view is expanded its y position is 100 and when it’s retracted it’s y position is 10 and depending on current y position trigger animation, is y pos is lower than 60 then the card view animate to retracted state and if it is greater than 60 it will animate to expanded state. Also pan recognizer have a velocity property so you can also change state depending on that.

[@UdayBabariya]

little suggestion for "handlePan" case .ended: let translation = recognizer.translation(in: self.viewHandler) var fractionComplete = translation.y / self.viewCard.frame.height fractionComplete = cardVisible ? fractionComplete : -fractionComplete if fractionComplete < 0.3{ cardVisible = false for animator in runningAnimations{ animator.stopAnimation(false) } self.runningAnimations.removeAll() animateTransitionIfNeeded(state: nextState, duration: 0.5) }else{ continueInteractiveTransition() } by this the card view will get back to .expanded state if user dont want to .collapsed state each time

[@So4i94]

You are the best. Many thanks!

[@VTL7]

Please help, how can we open this card by tap on Cell in CollectionView ?

[@cyn89110]

Hi Brian, I think animationProgressWhenInterrumpted is not needed, property framtionComplete of animator will set automatically when pauseAnimation().

[@akshaykumar-qj2kx]

Main View Controller is not working after adding cardviewcontroller

[@stevengao8345]

thanks for this great tutorial, do you already have a course that is doing animation like App Store, tap an app image, the app go smoothly take up full screen with some sprint animation ? thanks

[@nickhung145]

How to preset to start with Expand？

[@rodrigobuendiaramos3076]

I am trying to implement a search bar in the view. However, I am having trouble when the keyboard appears and disappears. I am thinking the best approach would be to create a "third" state to handle a semi-collapsed view?

[@akshaykumar-qj2kx]

Awesome : ) Brain . Thanks for sharing your knowlege :) Appreciate your work :) Well Done :)

[@prashantt727]

Great video but What about safe area support ? can you do something with it. One more thing suppose next state is collapse and User move his finger to up (he wants keep it expanded) in this case can we reverse the animation with velocity Hope you are getting my point

[@prashantt727]

Here How I achieved it in Pan gesture continueAnimation(finalVelocity: recognizer.velocity(in: self.cardViewController.handlerArea)) func continueAnimation (finalVelocity:CGPoint) { print(cardVisible == (finalVelocity.y < 0)) if cardVisible == (finalVelocity.y < 0) { var completedFraction:CGFloat = 0 for animation in animations { completedFraction = animation.fractionComplete animation.stopAnimation(false) } animations.removeAll() self.cardVisible = !self.cardVisible self.createAnimation(state: nextState, duration: TimeInterval(completedFraction * 0.9)) } else { for animation in animations { animation.continueAnimation(withTimingParameters: nil, durationFactor: 0) } } }

[@cementerioclub_86]

One question. I have lost interactivity with the back VC. Any Idea how can I regain it ?

[@takasurazeem]

self.visualEffectView.removeFromSuperview() self.cardViewController.view.removeFromSuperview() self.cardViewController.removeFromParent() *wink*

[@pierogfgenoveseII]

How would you do to swipe down from collapsed state to dismiss the view?

[@lmfao7224]

how would you go about adding scrollable content inside of the "card view". is it possible to move the y position of the card as the content scrolls?

[@666MrGamer]

I would love to know that as well!

[@MaximGolovlev]

just add this to your card controller extension CardViewController: UIGestureRecognizerDelegate { func gestureRecognizerShouldBegin(_ gestureRecognizer: UIGestureRecognizer) -> Bool { let offest = scrollView.contentOffset let v = (gestureRecognizer as! UIPanGestureRecognizer).velocity(in: nil) return v.y > abs(v.x) && offest.y Bool { return true } }

[@talezion]

@@666MrGamer Add a `UITableView`

[@robertwensley7514]

This is the best way to add scrollable content to the "card view": kzbin.info/www/bejne/b5SofptnbrVgiJY Make sure to offset the y-position of the scrollable content by adding this code to the setupScrollView function (otherwise the animations won't work): scrollView.topAnchor.constraint(equalTo: view.topAnchor, constant: 20).isActive = true

[@nuhanabilah_]

Thank you for your video, helps me a lot

[@eldarkk4566]

Brian damn you are Swifty Gangster

[@ProNoobsful]

i try to change label inside Card View when is .expanded and i get a BUG, hes automaticly collapsed.... i think animation stoped when a changed label how fix it?.

[@afeefsohail4869]

If i want to add 3 stages 1st fullexpand or halfexpand and Collapsed.

[@indiraamangeldinova2180]

thanx a lot!! it's REEAALLYY awesome!! thousands likes

[@Sniiigel]

Are the horisontal gray lines by default or are they manually added?

[@UdayBabariya]

Really Helpfull 👍🏻

[@abisai7483]

How to achieve navbar button click to wakeup also landscape not working properly.

[@robertwensley7514]

@BrianAvent When this card is added over a tableview, it breaks the tableview's ability to scroll. Any idea how to resolve that issue?

[@ipetrovbg]

It's because of the visual effect added as a sub view

[@WaK39c]

Somebody resolved this bug with tableView?

[@TheiTeckHq]

Hi Brian, thanks for this video. I wanted to ask how to go about getting the three states instead of just two. (collapsed & expanded). Say I want the card to go from 0 to 150. Then a further swipe up should expand it fully else a swipe down should collapse it. You can see something in Shortcuts app on iOS. Any idea or help will be appreciated. Thanks!

[@abdalmagidulmagbub8836]

wooow wow woooow thank you very much that was amazing

[@andrew7675]

I have this card running over another view, but I can’t press a button on the bottom view, please help

[@andrew7675]

Nevermind just removed blur view

[@coderacjhp9282]

You don't need to remove it just follow my steps below 1- Hide visualEffectView after adding it as a subview to view 2- Show it in "animateTransitionIfNeeded -> frameAnimator -> case .expanded:" 3- Add this method below of "runningAnimations.append(blurAnimator)" blurAnimator.addCompletion { (_) in if state == .collapsed { self.visualEffectView.isHidden = true } } And that's it, your main view has been accessible. Happy coding.. @@andrew7675

[@ikxni]

@@coderacjhp9282 Could you please elaborate on the first and second steps, its being troublesome to get it working :(

[@robertwensley7514]

@@coderacjhp9282 You're awesome! I banged my head against the keyboard for way too long trying to solve this one!

[@ReasonableTechReviewer]

@@coderacjhp9282 Thank you! But I can only access the main view after I have dragged the card view up and down once. Is there a way of solving this? Thanks in advance!

[@mehdiabdi3773]

WooooooW 😍 Awesome

[@jonyive6273]

how to add card in all screen (hole project)???

[@gopalkrishan92]

Very helpful and learning video

[@shingetzu88]

Hi Brian, what if I want the image to scale down to 1/3 of the screen and the card to occupy 2/3? How can I do the scaling instead of blur?

[@AvenCode]

Great tutorial! Thank you, just in time! I bought all your courses in Udemy. Please, when you will update your CoreData course - add some instructions how to use iCloud container to sync data between devices or at list how to save it on iCloud Drive.

[@30guarino]

"Just had to copy and paste my comment" Good luck lol....I've been trying to get the Udemy instructors to update their content for months on the Courses I purchased for "iOS 12 and Xcode 10" and it seems like only thing that got updated was the TITLE!!

[@tariqAlmazyad]

Evgenii Turchaninov CoreData is kinda slow , take a look as Realm

[@nutsilog]

Hi Brian, I followed this tutorial and added some additional frame animation of a UILabel to it. It doesn't seem to work on tap gesture though, even if it's working correctly on a pan gesture. I'd be happy to share you the source code. Can you help me with this, please?

[@nutsilog]

switch nextState { case .expanded: self.cardVC.view.frame.origin.y = 0 self.cardVC.enterNumberLabel.frame.origin.y = self.cardVC.handleView.frame.minY + 24 // this doesn't work on tap, but working on pan gesture case .collapsed: self.cardVC.view.frame.origin.y = self.view.frame.height - self.cardHeightWhenCollapsed self.cardVC.enterNumberLabel.frame.origin.y = self.cardVC.handleView.frame.minY - 24 // this doesn't work on tap, but working on pan gesture }

[@JCatl3y]

I’d love to see a tutorial on how to add a character selection menu and the ability to change characters in games. 📱👾👽🤖

[@muazfarooq8999]

@brian Kindly let me know how sms verification use in Swift

[@aliakkawi4759]

This is Awesome, thanks

[@AhmedMahmoud-te5wh]

Thanks for sharing 😍

[@bhushankumar6838]

how can we put as a button action please reply

[@TheFirzoknadeem1]

I have a map view on the background and a floating window but when I add the floating window it completely replaces the background (a white screen comes where the map should be displayed) any idea how I can fix this ?

[@dmitrygrin6930]

Did you find a solution? I have the same issue :D

[@TheFirzoknadeem1]

@@dmitrygrin6930 Yes I added the floating window at position 2 and it worked for me

[@rodrigobuendiaramos3076]

@@TheFirzoknadeem1 can you interact with the map view that you have in the background?

[@TheFirzoknadeem1]

@@rodrigobuendiaramos3076 yes

[@hassansfilms]

thanks a lot man!

[@longhoanggiang]

Thanks briant

[@jontierney3976]

Thanks!

[@marcinfrydrych5319]

Are you sure the SpriteKit course on udemy is up to date?

[@30guarino]

Good luck lol....I've been trying to get the Udemy instructors to update their content for months on the Courses I purchased for "iOS 12 and Xcode 10" and it seems like only thing that got updated was the TITLE!!

[@walmosawi]

very nice

[@muhammedasif7895]

you are amazing

[@alwaleedalabri3927]

I've dropped a text field & I covered the main storyboard with map view, it worked but I can't use then in the simulator, Its like the Card view blocking the the screen. Please help

[@kleon790]

yes thats happen because UIVisualEffectView() layer is covering the whole view

[@BGang]

@@kleon790 Any solution?

[@adamkenton2585]

Why dont you start really from scratch ? I'm a beginner and I have no idea CardViewController xib file, and not just that the other files too..

[@mohammadmohsin2863]

Anyone please guide me how can i implement above with TabBarViewController which also have navigation bar.Please

[@DmitryKatsubo]

2 likes! but it impossible )

[@aliquewilliams3080]

Not at all an effective way of doing this. You shouldn't couple the cardViewController to any other viewController.

[@sami790311]

The purpose of this video is not clean architecture.

[@shingetzu88]

Alique, what do you mean? What is a better way of doing this then?

[@supersquare]

@@shingetzu88 Did you ever find an answer to this?

[@shingetzu88]

@@supersquare no. :(

[@mkhasson97]

1st

[@muazfarooq8999]

And kindly give me grocery store Making tutorial

[@wassifmeskine3328]

why you create a cardViewController and left it empty ?

[@БЕОГРАДСКАБАНДА]

How to attach view to Referencing Outlets?