I’m working on a website, and the “Our Clients” page is supposed to have some speech bubbles that fade in when they’re within the view. However, I’m getting some really weird behavior from them. In the designer preview, half of the time, sometimes none of them work, sometimes only the first two work. On the website itself, usually the first one is the only one to trigger.
Hmm perhaps I’ll move this to bugs, then. First I’ll restart my computer just in case
Edit: I tried it with a few other browsers and I’m still getting no luck, usually only one or two of the quotes trigger. I’m moving the scrollbar bug to a different thread, so right now I’m just trying to figure out how to make the scroll animations work.
Hi @winterdrake, I was taking a look at the site, and I can see that on the “our-clients” page, there is a fade in from left interaction on the Flex-text class on the first bubble box.
On the next bubble boxes, there are no interactions assigned. Could you assign the interactions to each box that should have the interaction and then republish? I will be happy to check again.
I’m giving up on the animations for the time being, but I still need this resolved so I can put it back into the public site. I moved the page with animations to http://abps-mark-2.webflow.io/testimonials-animation
Hey @winterdrake I took a look at your interactions and noticed that you have a 25% Scroll offset? Can you please try removing that and then re-publishing your site to see if that resolves the issue?
If you switch the interaction trigger to On Load, there are no problems, which leads me to believe its specifically the scroll trigger causing the problem.
One thing I noticed that was strange with this site is that when you select an element on the page (for example, the Header Symbol) and then scroll up and down on the Designer’s preview window, the element moves up and down but then green webflow frame (or blue webflow frame if the element selected isn’t a symbol) seems to stay locked in position on the screen - if that makes sense. Is there some setting in the styles somewhere that is causing that behavior? I could imagine that might confuse the browser as to whether or not the triggering block is scrolled into view.
I haven’t made any settings do that, I just figured the artifacts after scrolling were a visual bug within webflow.
The problem definitely is the scroll trigger, I’ve had a lot of trouble with it so far. Really hope the devs can fix this -.-
I compared your project to several of mine and that weird behavior on the frames is specifically with your site. I was able to find the offending setting though…
Go to your Background div and set Overflow to Visible. Not sure if that will negatively effect your design but that stops the element frames from scrolling with the screen, and also fixes the interaction triggers on your quotes.
Hmm, that does fix the scroll thing but it screws up the actual formatting of the background. The BG is supposed to be a white to blue gradient that is the height of the screen, and follows the user as they scroll. By changing the overflow off of auto, it no longer follows the user. How can I fix this?
Also, do you know why having the background set to automatic settings just straight up breaks the scroll feature? Is there an explanation for it or is it just something wrong with WF?
@winterdrake - All of your content elements are children of the Background Element. Pull your content out from under your Background element, so that the background is its own element separate from everything else.
Then, on the Background Element, set the Width to 100vw, Height to 100vh. Set the Z-index to -1, Position to Fixed, and the Offset to Full.
