Need Help with Arrow Section Separators

Design help General
1

Hiya. I’m new to webflow - arrived here after trying quite a few wysiwyg style editors

check it out - pointy arrow section seperators

http://gwizzle.webflow.io/

drag & drop a div block between section (drag a div into the page and then drag it exactly between 2 sections in the NAVIGATOR view)
make it whatever size… mine is max width:100px, min height:100px
give it a left/right margin of AUTO and it floats in the middle
fill it with the same colour as the section it is extending down from
set it’s position to relative give it a z-index of 0
rotate it 45 degrees
mess with the margin-top/bottom until just an angle block pointing down is visible

any content in the container/section above which overlaps the DIV’s upper half & goes behind it… well just colour the above container the same as the above section bg & give it a higher z-index

sorted!

seems to work on all views ok

:wink:

i like this editor, way better than that wretched adobe MUSE.

2

Thanks for the tips.

You have to give all your sections containing a slide animation a overflow:hidden property, it will fix that bug:

http://vincent.polenordstudio.fr/snap/ci0lb.jpg

3

what bug?

you can do the angled lines too - same way, just with a couple of long divs 101% wide, angled a few degrees

http://gwizzle.webflow.io/tester

4

your page scrolls laterally because of the elements starting their animation outside of the sections.

5

on what device? it doesnt on my desktop or phone… obviously i wouldnt actually use that much fade in/up etc in a production site of that type, and if i did use mucho fade fx i’d mix them up a bit, but the page scrolls vertically fine on my devices. Some of the fade ins come a tad late, but i havent figured out the Offset control yet, which i suspect is something to do with the timing. I only started using the s/w last night at 1am, alot more to discover.

it’s whether to buy it. i dont need the hosting, i’m just looking at a fast way to layout scalable stuff which i can then chuck content in/out of via cfml & upgrade with other addons & tweaks.

This is about the 6th editor i’ve tried in 48 hours. Seems good for what i want.

6

Maybe you try to reproduce it when you’ve already scrolled down and loaded all the page, that way it doesn’t happen anymore. But try it when you have loaded the page but not scrolled to the bottom yet. Happens for every device, it’s not a bug, only HTML/CSS. When you offset elements outside of the viewport to animate them in afterwards, it expands the width of the body if you haven’t set any overflow property. It’s a common oversight when beginning to craft interactions with Webflow.

7

nope it’s not doing it on any device i have as i said… weird.

no wait… yes i see it now (just re-checked)

Oh well; i was just experimenting with one of the fx.

i have to say tho, i think webflow is the best of the various such editors/creators i have tried which includes Muse, Pingendo, Pinegrow, Blocs etc

i’m used to writing everything by hand, never used such an editor b4. Been out of the game for a few years tbh.

8

Would you mind sharing a screen capture of the entire browser when the page has loaded, before you scroll down the page? I don’t see how it can not happen on your side. It has to.

I just doubled check, happens on every browser, every OS, every mobile device.

9

sorry, i was editing my post while you replied lol

see my previous post :+1: