Streaming live at 10am (PST)

Create step by step sections


#1

Hi I would like to create a step by step guide in webflow.

http://zombi.nl/en/start-a-project

^ This website has a nice example but I am wondering how to achieve the effect where the circle with the number in it expands when you scroll to each section?

Also how to add the grey separator in between.
I understand that i should use columns och div-blocks to hold the content but how do i create the grey line so that it's centered and the text and image are on each side?

Im new to webflow and english is my second language so I am sorry if there are misspellings.


#2

It can be made with an interaction with a SCROLL trigger. You'll see that there's a threshold you can set for when the interaction is triggered. If you se the threshold to 0, the animation will be triggered as soon as the section appears, but if you set it to 60%, it should do what your example does.

So put the interaction on the element itself and try this.


#3

Use a DIV or a ROW

DIV: create 2 DIV
- class both DIVS
- float left and float right
- 50% width, inline block
- set right border of left DIV to 1px #c0c0c0

ROW: create 1 ROW w/2 COLUMNS, 6 + 6
class COL1
set right border of COL1 to 1px #c0c0c0

  • create 2 SECTION (top & bottom)
  • create element - change radius to become a circle
  • set interaction on SECTION 2 to update size / position of circle

#4

HI @Johan_Enstam, @vincent and @revolution made some great recommendations. I experienced a similar design request from a former client once, here's an example of something that may help:

https://webflow.com/design/olympus?preview=61bb911cbe140bfdf23e26e7b885f7dd

Click on the page titled "Football" (it's not exactly the same, but uses both interactions and the dividing line down the center that you need)

Also, check out http://interactions.webflow.com and http://help.webflow.com/interactions for more help smile


#5

Thanks I figured it out! It was pretty simple.


#6