Streaming live at 10am (PST)

Studio Aves scroll

How can I create a scroll similar to http://studioaves.com/ launch animation? Moving the cursor horizontally seems to create interaction or plays a video while vertical scroll makes the animation disappears (what do you call that scroll? when the whole page disappears) appreciate your help.


1 Like

The site is designed with a title section that’s height 100vh on top. And it’s hidden by default.

On top of all of this, there is a section that’s fixed and takes up all the screen. Inside of this sections, there are multiple sections positioned in absolute and also each taking up all the screen. And there’s a section on top of all of those sections, with a series of invisible columns, with one hover interaction on each column. Each interaction is doing this: Hide all sections + show one specific section. There’s an interaction on click on the whole fixed section, that is making that fixed section fade out then the rest of the site fade in while the first section of the site is shrinking.

Hello! I’m also interested in how studioaves did it and how I can do the same (without the horizontal scroll, just the vertical loading screen and fade away). Could not really follow your explanation. Would you know what it is called or where i can find a tutorial on this? Thanks!

The way I see it is that there’s a section with svg and title header. There’s an interaction on mouse movement on viewport. As the mouse moves from point a to point b the svg, title header, bg color changes accordingly. last interaction is on the y-axis. Any mouse movement on that makes the section fades away.

I managed to create the bg color change on mouse movement but Im not sure how I can create an interaction for the svg change or text change, nor how to hide the section if the page is scrolled down.

  • Is there a way on webflow to create page interaction or element interaction to change the svg? and text?
  • How can we hide the first section when page is scrolled down?

Sorry moses can’t really help you either, but also very interested in your second question:

  • How can we hide the first section when page is scrolled down? (Or maybe automatically when the full page is loaded?) So it would act like a loading screen until the full page is loaded.
1 Like

Hello!

I saw the post of moses310 and am also wondering if anybody could help me out.

I would like to create the same interaction as the start of http://studioaves.com/

I would want the first screen, and once the user scrolls, the website would go over the first screen. The user shouldn’t be able to scroll back to that screen. (sorry i hope it makes sense what I am saying.)
Thanks!

I merged your topic into existing one. No need to create duplicate topics for the same question.

1 Like

Still stuck on this topic, would really appreciate it if anyone knew the answer. Thanks!