Android tabs effect

onigetoc · February 12, 2016, 3:52am

I’m looking to recreate this cool effet for Ionic tabs bar. the underline move.

EffakT · February 12, 2016, 4:06am

To replicate the effect, you will need
http://julian.com/research/velocity/

The code for their tabs is here:

Dogfalo/materialize/blob/master/js/tabs.js

(function ($) {

  var methods = {
    init : function(options) {
      var defaults = {
        onShow: null,
        swipeable: false,
        responsiveThreshold: Infinity, // breakpoint for swipeable
      };
      options = $.extend(defaults, options);
      var namespace = Materialize.objectSelectorString($(this));

      return this.each(function(i) {

      var uniqueNamespace = namespace+i;

      // For each set of tabs, we want to keep track of
      // which tab is active and its associated content
      var $this = $(this),
          window_width = $(window).width();

This file has been truncated. show original

Mainly focus on line 93-102.

Do some research into how they do it. If you are still stuck, I’d be happy to help you out.

onigetoc · March 26, 2016, 4:42pm

ok, i will watch it tank you

rlouie · March 26, 2016, 8:19pm

I don’t understand…you get that automatically in android mode. Are you trying to get that effect in iOS or web?

onigetoc · April 12, 2016, 5:05pm

No, but in the web browser