Hi everyone!
On a site called ProfitBees, I’ve add load and click interactions and they work just fine. But I’ve also set up scroll interactions on the text, but rather than floating or fading in, they are already shown without any interaction.
Eg: “Working for You” text
Could I have some assistance?
Live: http://profitbees.webflow.io
Preview: https://preview.webflow.com/preview/profitbees?preview=b9c6a99b4df201ef83e5afeb4dbd2a02
Does anybody have any insight on the issue?
Hi, @MinewireNetwork Could you point me to which element is driving the scroll? And the name of the interaction?. I see the INIT, but having trouble spotting the section or element that drives the scroll interaction.
Not sure yet if this is the issue, but for scroll interactions I usually set the driver for the interaction on a larger element like a section and target the elements I want to animate with the interaction. So you could separate the init and apply that directly to the object and hook the scroll animation to the section. This is especially important if the scroll interaction moves the animated element on the y-axis. Otherwise the element can keep coming into range making it wobble repeat.
Playing with it now and will let you know.
Hi @vlogic! The element is the About Us Container. The text within has the interactions. 
Thank you!
Something else is wrong on the published site after clicking on the about section. When I try to scroll, a negative scroll interaction is countering the scroll (I think) and scrolling it back out of view?? It is doing something really odd. Can you republish the site?
it is a cycling repeat moving 100% y and then resetting to -100y. So I think maybe you applied a bee animation to the background accidentally
Is that the solution, does it work now? And which background?
No, not the solution to your original post - sorry for the confusion.
Please view your live link: http://profitbees.webflow.io/
Click on the about link.
I cannot scroll at all beyond just a small amount into the next section below.
Something is trying to transform content the opposite direction in a looping animation.
I think maybe you have a bee animation applied to a section in your live link.
Your other links worthy and contact are scrolling correctly. The scroll problem is only in the about section.
If you can republish I can look into the animation.
Not being able to scroll that section is making it difficult to diagnose. I would like to watch the live site progression and see if your interaction is being triggered.
Would it be possible to do a test and publish a live link with the parallax.js script temporarily disabled?
Sure, I’ve duplicated it and made the changes:
https://preview.webflow.com/preview/profitbeestest?preview=ce2c1442aed42e82d0b4a123a26db5e8
The About is now fixed.
Thanks! Checking it now.
Very interesting… Scroll interactions are not firing on absolute aligned divs. Change your sections to relative and everything fires in the preview.
I realize this messes up your layout for the other two sections. Not sure about the correct solution. I will ask for help.
Absolutely amazing use of interactions by the way! You are crazy - crazy good! Love the site.
I tried rebuilding a similar very simple scenario in a new file and the scroll interaction works fine on absolute positioned elements. I am not sure what is causing it to misfire in your site? Hopefully someone else will be able to help further. Sorry I couldn’t help you solve it @MinewireNetwork.
Thanks for the assistance! One thing, I noticed that setting the top div to Display:None allowed the interactions to work. But now I can’t scroll down on the page:
http://profitbees.webflow.io/test
Is there a way to force that scroll other than the Overflow settings?
Hi @MinewireNetwork, the scroll interactions do not work for elements that are within a parent element having scroll set to auto. It may be possible to do this, but you may need to use some custom scroll javascript or jQuery.
Here is an article on Stack Overflow which seems to address the question: Jquery scroll some text inside a div with overflow - JavaScript - SitePoint Forums | Web Development & Design Community
Thank you so much for the solution! I’ll try rebuilding it without the scroll set that way.
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.