Streaming live at 10am (PST)

Need help with tab interactions


#1

https://preview.webflow.com/preview/dogwalkerextracom?preview=d54f39753181e41e0aa3b5697726c95b

This is a thread i seek to have solved, which began with Webflow support attempting to figure this out. I think its mostly figured out..

I wonder how effect could possibly be correct.

For the first element, it doesn't have an original position changed.
For the second and Third they do have an original position changed.

The end result we seek is for each of the 3 elements to have the exact same effect happen to them,
so how could the exact same effect happen to them, when there is a

different procedure for element 1 and different procedure for elements 2 and 3?

  1. SKIP initial appearance
  2. PICK the trigger to be 'Tab'
    Now you have 2 areas-tab open, and tab close.
  3. On Tab Open, scale to 1
  4. On Tab Close, scale to .8
    Click done.

When you click from tab #1 to #1, you get a scaling effect.

  1. To make this happen for tabs 3 and 4, you can go to settings, select anything in tab widget, and select tab 2.
    a. Duplicate that trigger we made
    b. Now edit it-in the initial appearance, scale it down to .8

  2. Repeat process 5 for third tab
    Apply same interaction

Now 2 and 3, have a zoom effect.


So, what is the correct step sequence then?

This is the procedure I have written:

Go to tab widget; select content in the first tab. Apply interaction by going to panel, click + icon; and title the new interaction.

  1. SKIP initial appearance
  2. PICK the trigger to be 'Tab'
    Now you have 2 areas-tab open, and tab close.
  3. On Tab Open, scale to 1
  4. On Tab Close, scale to .8
    Click done.

When you click from tab #1 to #1, you get a scaling effect.

  1. To make this happen for tabs 3 and 4, you can go to settings, select anything in tab widget, and select tab 2.
    a. Duplicate that trigger we made
    b. Now edit it-in the initial appearance, scale it down to .8

  2. Repeat process 5 for third tab
    Apply same interaction

Now 2 and 3, have a zoom effect.


I dig that old design. Heres another Q

https://help.webflow.com/video-tutorial/tab-trigger-interaction
With this video, I saw that for the first interaction that was applied to
the first tab, it happened to NOT have an initial appearance set.

Despite not having an initial appearance set, it still accomplished the effect of 'zoom'.

With tab 2 and 3 this interaction was duplicated.
But then Nelson added an initial appearance of 'scaling down'.
Yet, it still apparently accomplished the effect of 'Zoom'.

How come tab 1 didnt have an initial appearance set?

Did i describe / understand something incorrectly?

-Elliot


#2

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.