I have no idea how to even start this, I’ve searched online and in this forum with no result so far.
What I’m trying to achieve is to have a website behave like a presentation on scroll.
Meaning instead of scrolling vertically or horizontally it shouldn’t scroll at all.
Rather it should behave like a PowerPoint presentation when you click for the next slide (fade out and new slide fades in)
To simplify, let’s say I have two sections
a Hero section with white text on black background
a mission statement section with black text on white background
On scroll the white text should just fade out, the background should change from black to white and the black text from the second section should fade in.
I realize I could probably just stack multiple sections on top of each other within a div block and then use animations but imagine that would be a great pain to develop and design and could get messy if I have say 10 sections.
I tried it with animation on scroll and opacity fading in and out but it’s not nice or clean
Does anyone have an Idea or tip on how this could be achieved?
Ps: What makes this even more difficult is I don’t have the option to animate Display none (Hide / Show) if I’m working with element trigger - while scrolling in view…
Funny enough I would have that option if I would use “scroll into view” but I need to animate multiple sections so that doesn’t really work either…
2nd: I wouldn’t use “while scrolling” or “scroll into view.” I would use When Mouse Clicked So that if you click anywhere on the section it will then hide/show elements. Then I would click on each separate div or text you want to animate and just do “when scrolling into view” offset none, and use an already created animation.
It’s because I want to create a certain style of website. I want to create a different user experience. It’s about the effect and experience for the user visiting the page
So like some pages scroll vertically which looks great and leaves an impression I want it to react differently on a scroll and just fade.
If the user would have to click somewhere it would be a different effect without the desired result and defeat the whole purpose… =/
If you don’t want them just to tap anywhere, you can always create a button that triggers an interaction that will hide/show certain sections, if pressed.
Here’s a collection of videos that may help achieve the effect you’re looking for:
Unfortunately however, while all solutions are interesting workarounds, they still defeat the purpose of what I’m trying to do ( i.e any type of visible scrolling or any button that needs to be clicked is a no-go for me )
Maybe what I’m trying to create is technically not possible within webflow, or I’m really bad at describing what I want to do:
A website that upon scroll does not scroll down or left or right but rather the section fades out and a new section fades in (without any movement down or to the side) basically like if I would have one powerpoint slide and hit space bar to go to the next slide
Here’s what I’ll try next:
Find if it’s possible to link a scroll (even if just 1% scroll,) to trigger an automatic interaction
I need to find an interaction that can be triggered and play all the way until finished (this I need so even a 1% scroll will act like the space bar in powerpoint - it will trigger the animation and play without interruption till the next section is visible) Otherwise you’d need to scroll way to much and it wouldn’t be smooth - so it should sort of be like with scrollify.js
Hope that makes sense and if there isn’t a way to do it in webflow, I’ll guess I’ll need to find a different solution
But I can only do 1 sections at once as soon as I try to do more sections it’s almost impossible to do so within one scroll animation (even if I set the containers vh to 400 vh or some insane hight)
I definitely think what you want to do is possible inside of Webflow. I also think you’re on the right track, it looks good so far.
In order to scroll through a section the mouse, has to know how far to travel before it triggers the next interaction. So, you will have to set a specific height for each section.
I still feel that aligning all the items horizontally would be the best practice, as the viewport would all be off-screen, and easier to set up scroll animations to achieve the fade out and fade in presentation look.