# iOS: Animating your own toast view

DevFeed: [iOS: Animating your own toast view](<https://devfeed.tech/articles/ios-animating-your-own-toast-view-22316.md>)

Original publisher: [Read original article](<https://www.thecodedself.com/iOS-Toast-View-Animation/>)

Author: Keegan Rush

Published: 2017-08-31T00:00:00Z

Content type: tutorial

Language: en

Sources: [The Coded Self](<https://devfeed.tech/sources/the-coded-self.md>)

Topics: [iOS](<https://devfeed.tech/topics/ios.md>), [App](<https://devfeed.tech/topics/app.md>), [ui](<https://devfeed.tech/topics/ui.md>)

Tags: [animation](<https://devfeed.tech/tags/animation.md>), [app](<https://devfeed.tech/tags/app.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [ios](<https://devfeed.tech/tags/ios.md>), [navigation](<https://devfeed.tech/tags/navigation.md>), [translation](<https://devfeed.tech/tags/translation.md>), [ui](<https://devfeed.tech/tags/ui.md>)

## AI overview

A tutorial on creating and animating a short-lived toast view in an iOS app without a third-party dependency. It explains how to position the view above the navigation bar, use a transform translation to animate it into place, and reset the transform when the animation completes.

## Source excerpt

A toast view is a small, short-lived popup provides a small bite of information (see what I did there?) to the user. It's an Android paradigm, but if you're working on an iOS app that has an Android component, the chances are high that you have been or will be asked to implement one at some point. So you might as well learn how to make one simply without having to pull in a 3rd-party dependency, right? Well, let's get started then. I'll focus on helping you get the basics of the animation down. The actual look of the view can be left to more talented designers than myself. Animating a drop down view from the navigation bar We're going to animate the toast coming down from the navigation bar, but the lessons learnt needn't be tied to the exact implementation. Create your animations as you wish. This is the final result that we're hoping to achieve: Animating the transform It's generally a bad idea to modify a view's frame just for the purpose of animation. We'll animate the transform instead. The responsibility of a view's frame is setting the view's place in the view hierarchy. The responsibility of the transform is to add any modifications to how the view should look to the user. You can modify the view's transform to rotate it, scale it, or reposition it. We're going to use it to reposition the view on the screen and animate that change. @IBAction private func startToastAnimation(_ sender: Any) { let toastView = createToastView() view.addSubview(toastView) animate(toastView: toastView) } private func createToastView() -> UIView { // 1. let toastViewHeight = CGFloat(80) let toastView = UIView(frame: CGRect(x: view.frame.origin.x, y: -toastViewHeight, width: view.frame.width, height: toastViewHeight)) toastView.backgroundColor = .green return toastView } private func animate(toastView: UIView) { UIView.animate(withDuration: 1.0, animations: { // 2. toastView.transform = toastView.transform .translatedBy(x: 0, y: toastView.frame.height) }, completion: { _ in // 3. UI