Fade section in/out on scroll like movie scene

Design help Animations & Interactions
1

Hi all, spent days trying to do this but not getting what I want. Tried with pure javascript, too.

I want to transition from one section of my site to another when a user scrolls, but I don’t want the sections to move up and down. I want the scroll to trigger the first section to fade out (to black) without moving up. Then I want the next section to fide in (from the black screen) without moving in from the bottom of the screen.

Has anyone ever tried to do this?

The change background on scroll animation comes close, but doesn’t quite allow what I describe above.

Thanks for your help!

Here is my public share link: LINK
(how to access public share link)

2

You will use a combination of the “while scrolling in view” interaction, with sections that use a fixed position filling the screen. I would give these sections a background color of black.

Each section will use a width of 100% and height of 100vh. I’d recommend working on the design of each section without the fixed position so that you can see everything while you’re working. Change to “fixed” when you’re ready to apply the crossfade interaction.

Then place a div inside of each section. This div will contain all of your content for the section. Size the div inside to 100% width & 100% height. This div inside will will an opacity property and upon scroll it fades out… and the user is seeing the black background of the parent and the next section will use hide/show and the interior content div will have the opacity fade from 0% to 100% revealing its contents.

All of the sections will need to reside in a parent div, which will be your trigger element. The height of this parent div will dictate the speed at which the interaction will take place as the user is scrolling.

There are other ways to do this too. This is just a very general starting point. There will be nuances to make everything fade in and out as you envision.

4

Thanks for that feedback @Port_of_Folio !

I’ve followed your directions but I’m not sure what is going on with the scrolling. It doesn’t want to scroll when I have the fixed position on there, which I’m not sure I totally understand how that is expected to behave.

I’ve got a sharelink working that outlines the steps you gave:

https://preview.webflow.com/preview/portfolio-site-1c56f5?utm_medium=preview_link&utm_source=designer&utm_content=portfolio-site-1c56f5&preview=59124cf38e51fbd1ead80a5fa4c27986&pageId=6503258d16c4538cb6da7925&workflow=preview

5

The scroll trigger will not be fixed. Only the sections inside.

I’ve made a crude example just to show the basic concept. It would need to have better spacing and use a hide/show interaction on each section to allow a viewer to interact with elements. I’m only showing an opacity change.

https://scroll-fade-sections.webflow.io/

Read Only link:
https://preview.webflow.com/preview/scroll-fade-sections?utm_medium=preview_link&utm_source=designer&utm_content=scroll-fade-sections&preview=a5a6527a57ecb8bb1b027537e9e3d4d2&workflow=preview

6

Wow! Really appreciate the help @Port_of_Folio

Unfortunately, I’m not able to get the scroll animation to work, despite copying over the display/height settings you have on the key sections of that demo project. Any idea why that might be?

https://preview.webflow.com/preview/portfolio-site-1c56f5?utm_medium=preview_link&utm_source=designer&utm_content=portfolio-site-1c56f5&preview=59124cf38e51fbd1ead80a5fa4c27986&pageId=6503258d16c4538cb6da7925&workflow=preview

The other thing I’m worried about is that I only want the first section (the planet/space view) to fade to black. Once the Case Study section is visible I’d like page to scroll normally. Any thoughts on that?

Thanks again!!

8

You’re close.

  1. Since you want the lower area to scroll normally, reset the “case-study” section’s position so that it’s not fixed.
  2. You aren’t seeing the fadeaway because the scroll interaction is starting too early. The trigger element is 400vh. Your Planet Section is 100vh. This means the interaction needs to start somewhere below 25% of the scrollable trigger.
    Last, since the “While Scrolling” interaction does not include a hide/show interaction, you will need to use the “move” interaction. We need to move the entire section out of the way. (My screen grab shows it moving 2000px). Without this step, your viewers will not be able to interact with the lower sections, if you have a button or form or something.

A basic crossfade is somewhat easier than fading to black. In order to fade to black, you will need to:

  1. assign a black background color to the section called “Planet Section”.
  2. The first opacity fade will be applied to div “Planet landing page”
  3. After Planet landing page fades out, you then need to fade out “Planet Section”
  4. Then make the entire section move out of the way

here’s a short video showing the interaction panel with settings