Streaming live at 10am (PST)

Sliding door effect to sections?

Hi all,
I would like to create a one page website where when you scroll to a new section it comes into the frame covered by an absolute positioned div, then after a heartbeat the div slides out to the right but not completely just off the live content area. Then when you scroll out of the section, it will slide back to cover the section.

I would do this on all sections (except each section would alternate left then right).

I have been playing around with Interactions, and can’t seem to get the effect I want, I think I’ve tried everything, but it is a little complicated.

Is this possible? Where do I start?

Thanks!

Dan

Here is my public share link: https://preview.webflow.com/preview/dans-joe-2-joe-site?utm_medium=preview_link&utm_source=designer&utm_content=dans-joe-2-joe-site&preview=fd4dc956b777251e8626dfc3615bb68e&mode=preview

Does anyone have suggestions? (bump)

There is a paid (commercial use) Javascript plugin called fullpage.js. You should be able to get the effect you want to achieve.

Hey Dan

not sure if you have tried this way but
I would just do a scroll into view animation on the absolute Div .
Chose the move option on the interactions dropdown
Set the initial state to cover the section content with your div (position 0px)
then set the second tab to move back to your desired position -
Repeat (but reverse the position) for the scroll out of view animation (don’t use initial state)
You will need to experiment with the delay and offset to get your desired timing .

Hope this makes sense

Hi Jake, I couldn’t seem to get it to work with regular interactions, but I got it working with Legacy Interactions. There are several problems with the way you suggested. The Move Into View seems to trigger scroll animations, so if the person navigates to the section from the navigation, the animation has already happened, or happens too fast. I couldn’t figure out how to trigger a timed animation to trigger when the whole div is visible. Any way if you’re curious take a look at my page and see how I did it in Legacy Interactions, it wasn’t that hard really.

Thank you very much for your suggestion though.

Dan

Hey Dan

Happy you got it sorted
Sorry I may not have explained it clear enough
If you chose the scroll into view interaction - you can then set the delay and offset for when that animation starts.
Anyways happy you got it working :slight_smile: looks nice!

Cheers Jake