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
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.