TabBar indicator: three styles, three behaviors

by GoodBarber

GoodBarber is a mobile app builder for iOS, Android and PWA. Its TabBar ships with three selection indicator styles: line, dot and tiny. Each one animates its own way. The line retracts to its center under the tab you leave, then re-extends under the new one. The dot fades out in place and fades back in somewhere else. The tiny slides across, with real intermediate positions. Here they are in one loop, morphing from one to the next. In the product you set one style for the whole bar, so the morph itself is a concept, not a feature of the current product.