Streaming live at 10am (PST)

Uber Website Vertical Slider


#1

Hi guys,

I'm trying to create something similar to the vertical scroller on the Uber website using Webflow. What do you think the best way to do this is? I'm thinking interactions but can't work it out so far.

Uber Website

Best,

Joe


Vertical Slider with Macbook Pro
#2

Hi, @jjms01

It is a little bit complicated but possible. :slight_smile:

How many "slides" are you planning to have?


#3

Hey @sabanna,

I'm planning on three slides


#4

Ok. Here is rough wireframe for that structure:

1) Each "phone" image it is basically div with settings overflow: hidden and position: relative. Phone frame is the image with position: absolute and z-index higher than image of prone screen

2) Middle block with phone should have 3 images, which will move up or down when section scroll into the view

3) Middle block with phone should have position:fixed and appear when middle section come to the view and disappear when last section start to come out of the view.

Hope I was able to explain the idea

Cheers,
Anna


#5

Hey @sabanna,

I'm struggling with the implementation of this...

Are you able to shed some light on the div structure of this?

Read Only Site Link - It's on the 'I Need A Hero' Page


#6

I will be able to help a bit later. Hope it is ok. :confused:


#7

Hi @jjms01

Here is some screencast that I did for show how to accomplish what you want.

1) Making one of the blocks - fixed and set animation:

2) Adding all images in one block:

3) Creating animation for the images. Here you will need to work a bit more to find out the best combination triggering object - animated object. Hope I was able to show the principles.

Regards,
Anna


#8

Dear Sabanna,

I am trying to follow your tutorial, but to be honest it is a bit hard since I seem to be missing a few steps I think.

You start already with the 3 slides being finished including a lot of nested divs and content, which makes it almost impossible to decipher what the settings per (nested)div are. So far I have managed (with many back and forths and rewinds..) to recreate the Container, the services wrapper, the service one/two/three wrapper, the service image wrapper and the service content wrapper. However, the individual content items inside these content and image divs are still a mystery.

Do you by any chance have the final version somewhere to simply edit/copy so I can more quickly identify the different div settings?

Thank you for your time!

Warm regards,
Bart


#9

Hi, @pbadmin

I was making these videos while working on the @jjms01 site in "read-only" mode. The structure of the grid I draw in a wireframe (in the 4th post of this topic) and he created it with the settings that he wanted/needed.
So, unfortunately, I do not have any finished results. with the vertical sliding effect. Maybe he does.

I am sorry, Bart. Maybe later I will create a separate tutorial with my own structure and share it with all users on the forum.

Cheers,
Anna


#10

Sabanna, looking forward to that. I was following this and am looking forward to seeing the tutorial. You are a rock star!


#11

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.