Streaming live at 10am (PST)

Scroll Trigger animations not visible


#1

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.

Tested, doesn't work on:

  • Chrome
  • Firefox
  • Chrome for Android


The live project: http://abps-mark-2.webflow.io/our-clients
Public Share Link: https://preview.webflow.com/preview/abps-mark-2?preview=10ae3332f29e48cefc6ea78323c4425b


#2

I am not experiencing any problems with the interactions and don't see any scroll bars.... :wink:


#3

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.


#4

I could replicate some weird behavior, it is freezing on my computer. i think there may be some interfering CSS in your site.... :confused:

I would have to look further.


#5

Did some more testing, zooming out makes it so that everything loads.

Edit: Resizing the window will also cause the transitions to occur, if the elements are in view


#6

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.


#7

The second and third definitely have interactions attatched.

The interaction is on the whole flextext div, which includes the quote author.


#8

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


#9

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?

Thanks in advance!


#10

Did it. The scroll triggers still dont' work other than the initial load.

http://abps-mark-2.webflow.io/testimonials-animation


#11

Hey guys,

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.

Hope this helps!
Zack @ MetaFlare


#12

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 -.-


#13

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.

Hope this helps!
Zack @ MetaFlare


#14

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?


#15

@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.

I think that's what you're looking for. If not, I'm sure we can figure it out :smile:
Zack @ MetaFlare


#16

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.