Animating tabs from one to another

I created a basic tabbed UI using the cli and tabbed views, which I wrapped into animated tabs to allow ‘sliding’ animation from tab to tab (see below).

Now, if I tap/click the first tab and then e.g. the last tab, the animation ‘animates’ through all views/tabs in between the first and the other tapped tab.

How would I avoid this (so the animation always looks as switching to the next tab)?

<f7-views tabs class="safe-areas">
   <f7-toolbar tabbar labels bottom>
      <f7-link tab-link="#view-home" tab-link-active icon-ios="f7:house_alt" icon-aurora="f7:house_alt" icon-md="material:home" text="Home"></f7-link>
      ....
      <f7-link tab-link="#view-settings" icon-ios="f7:gear" icon-aurora="f7:gear" icon-md="material:settings" text="Settings"></f7-link>
   </f7-toolbar>
   <f7-tabs animated>
      <f7-view id="view-home" main tab tab-active url="/"></f7-view>
      ....
      <f7-view id="view-settings" name="settings" tab url="/settings/"></f7-view>
   </f7- tabs>
</f7-views>

No, it doesn’t work like that. Right now all tabs just stacked horizontally and it moves tabs container, so not possible to skip tabs

Do you have any nifty idea, how to do that?

Not really :slight_smile: As it is a pretty tricky thing, i will try to implement it on NY holidays

It’s not really important.

For now, I switched back to page/routes-based-navigation, which works fine.

@nolimits4web Did you find some time to think about that feature?

  • I thought about using a virtual swiper, but then I have to remember scroll-positions, etc… Also that’s not ideal for dynamic content…

  • Also slidesPerGroup seems not to be prepared…

Any other idea? (I’d volunteer to help :wink: )

… I think skipping slides would be a great feature for Swiper anyway.

As mentioned earlier - not really super-important, but that would be a nice-to-have (especially considering tabs in iOS works like this, too…)

Was trying some attempts to add such “skip” feature for animated tabs, but without success :slight_smile: Because there is a scenario when user clicks another tab during transition between other two, which makes this logic broken. In this case, only soultion is not to allow to switch tabs during transition but this can lead to bad UX

Understood… no problem…

A while ago I did that using a Virtual Swiper and that worked quite good - although we loose caching and scroll-positions (or it needs some code to restore these things, which could work as well).

Anyway: not that important - I just want to get your opinion about it. Thanks for the reply!

Hmm, actually if you don’t have too many tabs, you can increase its addSlidesBefore and addSlidesAfter to the number of tabs/slides and it will keep them in DOM https://swiperjs.com/api/#virtual

Would that work for pages/views as well - where every page contains a number of sub-pages/sub-views (multi-view)?

Yes, seems to be is working fine. Here is how i managed to setup it:

<template>
  <f7-page :page-content="false">
    <f7-navbar title="Swipeable Tabs" back-link="Back"></f7-navbar>
    <f7-toolbar bottom tabbar>
      <f7-link tab-link="#tab-1" tab-link-active>Tab 1</f7-link>
      <f7-link tab-link="#tab-2">Tab 2</f7-link>
      <f7-link tab-link="#tab-3">Tab 3</f7-link>
    </f7-toolbar>
    <f7-tabs swipeable :swiper-params="{ virtual: virtualParams }">
      <f7-tab id="tab-1" class="page-content" tab-active>
        <f7-block>
          <p>Tab 1 content</p>
          ...
        </f7-block>
      </f7-tab>
      <f7-tab id="tab-2" class="page-content">
        <f7-block>
          <p>Tab 2 content</p>
          ...
        </f7-block>
      </f7-tab>
      <f7-tab id="tab-3" class="page-content">
        <f7-block>
          <p>Tab 3 content</p>
          ...
        </f7-block>
      </f7-tab>
    </f7-tabs>
  </f7-page>
</template>
<script>
  export default {
    data() {
      return {
        virtualParams: {
          // dummy slides, as much as tabs
          slides: ['', '', ''],
          // as much as tabs
          addSlidesBefore: 3,
          // as much as tabs
          addSlidesAfter: 3,
          renderSlide: this.renderSlide,
        }
      }
    },
    methods: {
      renderSlide(slide, index) {
        // return existing DOM element in Virtual render
        return this.$el.querySelector(`#tab-${index + 1}`);
      }
    },
  };
</script>

But actually, why Virtual Slides, it doesn’t solve that animation issue and it still goes through slides in between

Hehe… very cool!! :ok_hand:
I’ll check that out asap - but, as I said, don’t spend too much time with it… for me it’s just a detail, and I think you have better things to do!

Anyway - I really appreciate your commitment in those cases!

Have a nice evening