I have a Div on this page and I thought I set it up correctly, but I can’t get it to react when I scroll it into view at the bottom viewport. It just stays in it’s initial state.
It’s the last element on the page and you can see the words “scrolling into view” which is text block inside that Div.
Not sure what I’m missing I had this working on other sites I played with.
Edit: when that item is in view, in the designer, and I go to preview the site, then I can see it scroll over like as if I had it on an “on load” trigger, which I don’t.
Hey Travis
Your site is a mess
But I can maybe help you.
In mypage top section you set Overflow to scroll. Why? Just set it to visible.
You can no longer scroll now, but that is because you have put height as 100%. Change that to auto in the following divs: body, big wrapper and mypage.
At last change position to auto on every div. You don’t need to have them set to relative.
Hopefully that helped
David
EDIT
The reason it didn’t work before, is because scroll interactions don’t work with overflow.
@Davidlin_ch12, I have to apologize I cut much of my site out because I thought it would make the problem simpler to solve, but It really just confused anyone trying to help and makes my site look idiotic.
Edit: I made sure “mypage top section” 's parents all have overflow set to hidden.
You’ll see why my positioning has to be absolute on “mypage” and why the “mypage top section” has to be the one who scrolls. Because other pages are coming into view and “mypage” is going out of view depending on the navigation route.
I can’t for the life of me figure it out I have been messing with it again for a while.
The browser knows what is in view and what is not in view, beause it determines the size of the scrollbar dynamic piece.
So the browser knows when the triggering should take place (when my element comes in view), so why would the triggering not be happening?
Thanks so much and I’m sorry about trimming the site down before.
Edit: the really interesting part, and what might lead to the solution is this. If it (the bottom element on the “mypage top section”) is in view to start with, I see the effect. But when it’s not in view and I scroll to it (expecting the effect to bring it in view) it stays hidden and never does anything.
Hello Travis
No problem, I see now
I’ll try to look at it, but I don’t expect to find any possible solutions
The problem to me still looks like overflow scroll. I am not sure if it is a webflow bug or simply because scroll trigger doens’t work with overflow scroll. I’m not a coder, so can’t help you on this one
@Davidlin_ch12 thanks so much really a big help in me trying to understand how this works, and I’m definitely not a coder either .
I did set the parents of “mypage top section” to “hidden”.
Can you elaborate what you think about the overflow scroll problem, which div are you referring to?
The “mypage top section” has to have overflow because that’s what gives it the scrollbar and allows users to see the whole Div and all the content that’s not in view.
I am talking about mypage top section. I think that scroll trigger doesn’t work with overflow auto, scroll. The browser is probably not counting overflow as a mean to start the animation.
Please don’t quote me on that one, as I do not know. You need to talk to a more experienced person
As you said in your second post, when you click preview, the animation will happend, because the browser can see, that it is already scrolled to the point where the animation starts. If you then try to put an offset of 30% in the interaction. It will not happend upon load. Really strange.
I’ll recommend not to use the scroll trigger. If you look at the website, MinewireDesign has made, called Web 2.0 ( http://web20.webflow.io/ ), you can see that he uses all other triggers than scroll.
I think you might be right Dave, because when you make the browser smaller, and then widen it to bring that element into view, it acts like it should, it triggers.
But the act of “scrolling” does not bring it into view.
Hi @Davidlin_ch12 and @TravisBKlein, the scroll interaction does not work for classes that are scrolled into view using overflow set to auto or scroll.
My suggestion would be to create separate sections/divs under the body for each post block, and set the interaction on the section/div where you want the interaction to trigger when the section/div scrolls into view.
Hey @cyberdave , thanks I think I saw what I was doing. I need set starting trigger element to the actual section to have the scroll interaction, and have that trigger, affect the element in that section I want to slider into view.
I added a new div that is the parent of the sections I added on the page.
Only this new parent div is what is scrolling, the sections are not.
But I did that and it still does not work.
The bottom “new interaction” is the one I just set and is triggered by the “mypage middle section”.
I set the affected element in that trigger to be 500px to right and 0 opacity initially in the designer window, but it just stays there when I scroll down to the “mypage middle section” and never does the scrolling into view.
I took a look, and it seems the mypage wrapper is set to overflow scroll, and this is a parent element of the “mypage middle section” class. Since the parent element has overflow set to scroll, I am afraid the scroll trigger action will never get triggered.
I can see the type of navigation you are using for this site design, however the scroll trigger does not really work with that kind of layout.
@cyberdave now I’m just perplexed. If some type of parent on that page doesn’t have a scroll set, then… well… nothing will scroll and having an element with an awesome scroll trigger in place that can’t be scrolled to, would be pointless.
I feel like I’m missing something here.
How can a site scroll and have a scroll trigger if all parents can’t scroll?
