▼
Streaming live at 10am (PST)

Multiple buttons multiple pages

Design help General
#1

Hi guys, I think this is a relatively simple problem but I cant figure it out in webflow.
I have a series of images in a row at the top of the page and when each one is pressed it needs to show info regarding that image:

  • website loads with ImageA info as default page
  • ImageC is clicked - imageA info needs to fade out and ImageC fades in.
  • ImageD is clicked - ImageC info fades out and ImageD info fades in…etc

Is there a way to do this with interactions directly in webflow as I’m not a coder.

Thanks in advance.

#2

The way I generally handle that situation is assign a trigger to each button that fades out all of the others every time it’s clicked. If the others are already faded, then nothing will happen, but if one of the others is visible, it will fade out.

Hope that makes sense!

#3

You can use a TAB component. Put your images in the tabs links themselves and the descriptions in the tabs contents.

#4

Thanks Cricitem but once everything faded how do you get the relevant content that belongs to the link to fade in again?

#5

You make multiple Click interactions, and you need to make sure that the ones that cause all of the (others) to fade are listed BEFORE the Click interaction that causes your intended element to fade in.

If you like, you can schedule a Wait in the Fade-in interaction so the previous image is completely faded out before it fades in. Otherwise, you SHOULD get a cross-fade effect.

Button 1 Click Interactions

  1. Fade Element 2
  2. Fade Element 3
  3. Fade Element 4
  4. Fade in Element 1

Button 2 Click Interactions

  1. Fade Element 1
  2. Fade Element 3
  3. Fade Element 4
  4. Fade in Element 2

Button 3 Click Interactions

  1. Fade Element 1
  2. Fade Element 2
  3. Fade Element 4
  4. Fade in Element 3

Button 4 Click Interactions

  1. Fade Element 1
  2. Fade Element 2
  3. Fade Element 3
  4. Fade in Element 4

You can also do a common element type for all 4, and fade that out before fading in the one that was clicked. That would work like this.

Element Names [combo] [class]
[fadePhoto] [fadePhoto1]
[fadePhoto] [fadePhoto2]
[fadePhoto] [fadePhoto3]
[fadePhoto] [fadePhoto4]

Click Interactions

Button 1 Click Interactions

  1. [fadePhoto] 0% opacity 500ms
  2. [fadePhoto1] Wait 500ms - 100% opacity 500ms

Button 2 Click Interactions

  1. [fadePhoto] 0% opacity 500ms
  2. [fadePhoto2] Wait 500ms - 100% opacity 500ms

Button 3 Click Interactions

  1. [fadePhoto] 0% opacity 500ms
  2. [fadePhoto3] Wait 500ms - 100% opacity 500ms

Button 4 Click Interactions

  1. [fadePhoto] 0% opacity 500ms
  2. [fadePhoto4] Wait 500ms - 100% opacity 500ms
#6

Thanks for the reply guys I think Vincents suggestion will work best here, although I have no idea how to remove the color of the link box. I’ve set it to transparent for normal state and current state but when you preview the page and click the link a light grey box appears around the link??

#7

If you share your read only link I can have a look

#8

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