Interactions Moving Rest of Page Down

Design help Animations & Interactions
1

Okay, I’m tired of attempting this - hopefully someone with more experience will be able to assist me. When making an interaction, a testimonial that drops down, in my case, I’d like it to move all of my other stuff down. Example: the footer, other testimonials that might be in the way and the text on this will bleed over to the next.

While I’m here, maybe someone could also explain this: If one testimonial is opened and another is clicked, how do I make it close the other open testimonial and open the one they clicked.

Hope this wasn’t hard to understand. ._.

[1] Share Link

2

This is going to be a bit of topic and more on design.

  • The press to see testimonial is not a user friendly thing. They should be short and sweet and easy to read.
  • the second testimonial is really long. I would make it really short and just added a read more button and then taken the visitor to a new page. Where you can style the text nicely and maybe add more images or something like that.

But if you insist on having it the way you have made it, put the text div under the image. initial Height 0px overlay hidden. On press, you have to use a PX amount, you can’t use auto for height.

To open one and close another you use the same interaction but affect a different element.

3

If you have a better way, by all means, I’d love to see it. I’m all for bettering myself. The reason I wanted an expanding window is because one of my testimonials is horribly long.

I really appreciate the answer to my issue - I’ll try it as soon as I get back. If there’s a better way, though, I’d love to try that.

Edit: How do you do a “Read More” option?

4

Hi, so:

1. When something was hidden and expand, or when something that was compact expands more, you want what’s underneath to be pushed down—rather than being covered—by the newly shown content, right?

That’s simple. I’m not going to talk about Webflow—as I couldn’t find any example of what you’re talking about in your shared site—but about principles of HTML, and you should be able to easily apply that to Webflow or any other front end development method.

If you make an interaction targeting an element for it to expand, from zero or a given value, to another, bigger value—let’s say from 200px to 700px—it will naturally pushes everything that is under down below, as you would like it to, under the following conditions:

  • the element is Position _auto, static or relative
  • none of the parents of the element have a given height (a height set to a fixed value), but instead have a height set to auto

That’s quite simple: the element will expand in height, and as all its parents are auto in height, they cill expand with it, pushing everything under, in what we call the HTML flow of elements.

However, this behavior will not happen if:

  • any of the element parent have a given height
  • the element is set to position:absolute of fixed

If a parent of the element has a height, either he content of the element will go out of it and mix with everything under, or it won’t show up at all if the parent has overflow:hidden
An element that is either fixed or absolute is out of the flow of the elements and can’t possibly pushes anything in any direction. It’s flying over, under or in between things like a ghost in the limbs.

2. If one testimonial is opened and another is clicked, how do I make it close the other open testimonial and open the one they clicked.

First, you need to name your testimonials elements, the element that is going to expand, with the same name.

Then you need one open interaction that is LOCAL, that’s limited to the testimonial you’re on, and only opening the testimonial you’re on. So you need to carefully chose your trigger element for it to be either a UNQUE PARENT or a SIBLING of the testimonial expanding element, because on Webflow you can only limit to SIBLINGS and NESTED (children).

Then, your interaction should start with a first step of closing all testimonials elements, with no limitation.

Your interaction will then do this:

  • I CLOSE ALL THE TESTIMONIALS SO IN CASE ONE IS OPEN THEN IT WILL CLOSE!
  • NOW I OPEN ONLY THE LOCAL TESTIMONIAL!

(yes, in my imagination, interactions shout things very loud when they do it)

5

Truly, I appreciate your help and wealth of knowledge - I have learned a bit about HTML structure.

Another question for you, if you don’t mind: I set a certain amount of pixels for desktop mode. No problem, show more/show less works perfectly. In mobile mode, it doesn’t show

6

Setting dimensions in Interactions is a bit tricky.

For instance, if you zero a div to hide the content, you can’t use “height:auto” to give it its original size. It won’t work. Sometimes it will work in the designer, but not when published. There’s a technical HTML reason for that but it doesn’t help here.

The problem is that the height will vary from desktop to mobile, of course. So what I found works, and I now do all the time, is that my unfolding interactions has an extra step: first I say “height:550px” (for example) then immediately after and with no delay, “height:auto” and there, the div takes up the right height considering its content. It will provoke a little “hit” on the page as the height of the page will change instantly after the interaction.

However, I’m not facing that issue a lot, because of one simple rule I follow: fold/unfold interactions are great for desktop but convert very badly on mobile phones (mostly ok on tablet though). An unfold interaction is OK when you keep a sense of what’s happening. If it’s to see the content on a phone being pushed away so far that you’re wondering what happens, that’s way too much complexity for a phone.

So on phone I either have a different set of elements to show, or I give the elements the right height to begin with and hide the trigger button.

We have to ask ourselves how relevant are interactions for mobile. Experience on mobile should be the simplest, linear experience we can propose.

1 Like