Alternating interactions

Public link: http://chipscereal.webflow.io/
Read-only: https://preview.webflow.com/preview/chipscereal?preview=275be8b407156bcffeb9358282481da1

I’m building a single page site for a friend’s book. I’m attempting to use the “nav links” to swap between blocks of content.

Here is a screenshot of what I’m aiming for:

Each box is supposed to fall from the top and fade in. Then if a user clicks on the next link the current box disappears and the appropriate box falls down. I can get the boxes to come down and fade in properly, but I can’t figure out from there how to get them to disappear and have the others appear respectively. Plus, start it all over again if a user clicks a link they had clicked on earlier.

I hope that makes sense. I’ve tried a ton of different things and can’t seem to figure it out. Is this even possible?
Any help is much appreciated!

Not sure I understand… but I think this is what you are looking for…

You have 3 boxes… using the H3 element… titled

  • What the heck is cereal ?
  • Has anyone read this ?
  • and
  • What the heck is cereal ? (again ?)

And you want them invisible

  • until a viewer selected the associated link…
  • which I’m guessing are
    — About it
    — Who likes it
    — Buy it

Since Webflow cannot target an ID…

  • you need to put unique class around each Content Box Wrapper

So… you need this:

DIV Box1

  • DIV Content Box Wrapper
    ---- What the heck is cereal ?

DIV Box2

  • DIV Content Box Wrapper
    ---- Has anyone read this ?

DIV Box3

  • DIV Content Box Wrapper
    ---- What the heck is cereal ? (again ?)

Create an Interaction that Moves and Hides (opacity) all 3 Boxes (1,2,3) up and off screen

When the user clicks on About It

  • an interaction assigned to About it
  • will move Box 2 and 3 up and off the screen and change opacity
  • then will move Box 1 “into position”… on the screen and change opacity

Same thing will happen when the user selects Who Likes It

  • except box 1 and 3 will move up
  • whereas box 2 will move “into position”

Rinse and repeat with box 3.


Here’s a similar discussion

The OP on that post did something similar… he his site here: - scroll down the post to see it

Thanks @Revolution. I think we understand what each other is saying. I’ll give that a whirl and see what happens. =]

Ok @Revolution. I think I followed along with what you suggested. It’s getting pretty close. The initial appearance is good (except I left off the initial 0% opacity so it would be easier to see what was going on for now) Each box falls from the top and aligns correctly. Each click causes the other boxes to disappear. However, when clicking on a link that the user has previously clicked on, the “fall from the top” movement doesn’t seem to be working once again. The box just fades in. I tried to adjust my “Box Effect Interaction” to accommodate, but it doesn’t appear to have worked.

What am I missing??

Take a look at this demo. It might help:

https://preview.webflow.com/preview/demo-interactions-multiple-elements-01?preview=eab0c7fbd0003335dac172556938b29a

You can Preview it in Webflow…
but the absolute positioning will not work… due to the Custom JS Code.

To see it with Custom Code… go here:
http://demo-interactions-multiple-elements-01.webflow.io/

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