Streaming live at 10am (PST)

Webflow Workshop - Bringing a static mockup to life in Webflow


#1

Join us live on June 20th at 10am (pacific)
[ Watch live ] | [ Join the live chatroom ]

In the next Webflow workshop, we will be building off of a static mock that a dribbble user, named Gil, created. But after we rebuild the mock, we'll make it come to life by adding custom interactions and animations.

Design by:


https://dribbble.com/shots/3535879-Antelope-Canyon/attachments/784942
https://twitter.com/gilhuybrecht


Clone this project: TBA


#2

#3

#4

For some reason the numbers links are not working correctly, the number 3 scroll to slide 2, the number 4 scroll to slide 3. When you remove the navbar or change its position the slides links work perfectly well.

I still don't understand why.

Thanks for this workshops Nelson.


#5

Hmm... Yeah. I was having trouble with that during the stream. Did you figure out the issue?


#6

I was playing with it, but still don't know how to get it to work properly without changing the navbar styles :worried:


#7

I played with it a bit more and get it working. This is what I did.

Put navbar inside a div with position absolute top left, with a width of 90px and an auto height (or zero).
Change the navbar to have a height of 100vh and a position of auto (static).

This way the height of zero of the navbar container don't affect the scrolling effect.

Have a good day.