Streaming live at 10am (PST)

Curtain Effect for Images and Videos

Hi everyone,
I am Caroline and completely new to the webflow world and really impressed, how much is possible.

I am trying to design a curtain effect for images/videos like this one
https://ateliergymnase.webflow.io/

but I am pretty lost, tried it already for days… I thought I am nearly there, but my page moves now from right to left.

Here is my read only link:

https://preview.webflow.com/preview/carolines-initial-project-ab11eb?utm_medium=preview_link&utm_source=designer&utm_content=carolines-initial-project-ab11eb&preview=817ff8e9ce512d9308dac1edc9bee591&mode=preview

I would be more than happy to get some help of you guys! Thanks a lot in advance!

Hello @Caroline-Elisa . A few things to unfold, but let’s start with the page moving left and right.

There are some parts of your site that go beyond the width of the screen. For example: Header image has a left margin of 190, and also has a min-width of 70vw. that means on screens where 190 is larger than 30% of the total viewport, it will overflow.

The better way to do this is:
Remove left margin on Header Image
Add left PADDING on “div-header”
Give Header Image a width of 100%, and remove min-width 70vw. (you can make it 70%, it will calculate based on the div containing it, but not vw, because that calculates the total width of the screen)

If you apply the same approach to all the sections, you shouldn’t have any more issues. Think that, no matter what your layout is, the total width of the elements should not exceed 100vw.
And, when in doubt, you can always try giving the mother container of your sections an Overflow:Hidden, and 100% (or 100vw) width. This should trim out excess graphics.

Some layouts needs a different approach, but this is the basic idea. Feel free to ask me about each section individually, if you did not manage to solve the issues in other sections. Once all these are fixed, we can discuss the curtain effect you are trying out, because there are different approaches to do this, and it’s best we decide based on your final layout/structure after we fix the overflowing issues.

Cheers!

1 Like

Hello @Mr_Finn .

Thanks a lot! I gave every section a vw that is 100vw or smaller except from my section-track, where I did a horizontal scroll effect. There I gave the camera section a overflow: hidden. If I give the section-track a overflow: hidden, which is the mother section, the horizontal scroll effect doesn’t work anymore.
Is this the problem?

Cheers!

Your “grid 2 columns” div still has a 100vw. Since the sction it is in already has 100vw width, it’s better to do this:
Give the “container” a min-width of 100% (you cannot change width of container elements, only min and max width).
Then for the grid inside the container, set it to 100% instead of 100vw.
Then give the “container” left and right padding, if you don’t want the image and text to be touching the edges.

As for the horizontal scroll effect, I’m trying to figure out what’s the issue and will get back to you

But just as a first look, you do not need to make the orange line that big, if you are resizing it to be much smaller on scroll. This might solve your overflowing issue?

What I mean is, just place a small line (final size you need) in between the texts, and animate the x-scale and opacity. No need to begin with such a huge line (unless you are planning to change and want to use a big line, in which case we’ll have to approach this differently)

Hi @Mr_Finn,
thank you so much for your help! This already helped me to understand the Webflow logic behind it.

I already made it to do the curtain effect.
I just put two div blocks next to the header picture. One on the left and one on the right side with position absolut and gave them the z-index 2.
The Header picture is a background image of a div block.
With the Scroll animation - while page is scrolling - I changed the sizes (width) in procent of the two withe divs from 0 to 17. I choose the keyframe 0% and 20%.

I hope this can help others, if they trying something similar!

Thank you very much!
Cheers!
Caroline

1 Like