Streaming live at 10am (PST)

Scroll Interaction on page reload


#1

Hello, Webflow noob here.

I’ve created background fade in/outs when scrolling from section to section. It’s working great except when you “reload” the page after scrolling down past the first section. It seems you have to scroll all the way back to the top to trigger everything correctly again.

Is there a way to correctly display the right background element after a page reload?

Secondly, is there a way to initialize scroll into view animations automatically if the elements are visible on page reload and not after a “slight” scroll to initialize?

Thanks in advance.

Here is my public share link:
https://preview.webflow.com/preview/test-project-cc3a3e?preview=ff1f2b08beb0654524814e6106420d5f

published project link
http://test-project-cc3a3e.webflow.io


#2

Crickets… Maybe I’m missing something obvious? I’ve searched for an answer extensively with no luck on a solution, though it seems like it would be a common issue.


#3

No, nothing obvious here. Browsers reload where you were in the page and it may skip interactions based on scroll.

There’s a way with JS to prevent automatic browser scroll on refresh, so on reload you’d have to scroll again and trigger the interactions.

(you still have to carefully read the answers in the page and find a recent, working script)


#4

There’s maybe a way but you have to remake your page and IX differently: the goal is to have your elements show as desired when the page loads. Meaning each section with the right bg, the bg you want to see if you refresh on any section. Then have your first interaction change those defaults and setup the page for the desired UX.

Does it make any sense? It’s not rare that I have all my interactions do way more than what they just seem to. Especially resetting a lot of other elements in order to take care of all the use cases. Often, an element will do something when clicked or triggered by a scroll, and at the same time reset 10 other elements (even if most don’t need it).

I’m sure there’s a way to achieve what you want and have clean reloads. (I’m not sure why you worry so much about page reloads though)


#5

Yes that does make sense. I’ll have to try a different approach. I’m curious about an approach you might try to get fades between full width/height background elements.

I can of course make it that the site always reloads to the top but on principle alone, it feels like a cop-out. And of course I worry that on the chance instance someone does refresh, it will break the site and that’s just not acceptable.


#6

Hey would you look at that. I figured it out.

http://test-project-cc3a3e.webflow.io

Thanks Vincent for the prompt to rethink. I orginally followed a tutorial and it was a good start, but ultimately I should’ve re-built it the way it makes sense to “me” to get what I need.

If anyone’s interested, the read only file in the original post should have the updates.


#7

I am interested about this I have the same scroll interaction you are talking about had problems maken it the way it was shown and now re thought it out. I will post both pages (thanks Webflow for the site copy/paste) what I ran into was the interaction was lost with what I would call to much going on. Also I had issue with large grafix messing with location of assets. I had the BG interactions at -1 and page wrapper holding sections in those sections I put the large grafix. When I started putting content in found that everything was needing adjusting. This is where I got to I like many things but in the end was to much for a landing for me. also the services was to much to, but by the team section I started using flex and new where I had gone wrong. So copied the page and striped clean down the the BG’s and sections with the interactions set I went through and made the second page.

So this is the first page: http://rcc-project.webflow.io/

And this is what I would like to call the clean version acting the way it should and has the feel I wanted in the first place: http://rcc-project-f05000a371c2f7da8e30b043f39.webflow.io/

feel free to contact me private message if you would like to see the read-only for my solution as I to was having your problem and some how fixed it but wasn’t sure how. As you can see though my sections reload the interactions and section right back and the scroll interactions work from the reload. :slight_smile:


#8

I did name each BG and section there own subclass and did an interaction for each one.


#9

The second page only took a day or so I am slow and picky so I take my time but webflow makes doing a second option very easy when working. I like this very much, now with all the big grafix moved onto my BG’s I have no spacing issues in my section holders and my content can sit nice.