I have some scroll into/out of view animations on the “work” page, for my client logos. They should be invisible on load and appear on scroll. This used to work, not sure what happened. Any help would be much appreciated!
I’m a little bit lost in the details of the webpage. There seem to be roughly 150 different interactions, many of them affecting different elements, so some more guidance might help!
For each client, the logo
image is nested inside of a div called
client logo box which is inside of a
column which is inside of a
row which is inside another div called
clients logo box which sits in the
content wrapper in the
Hopefully we can figure this out a bit more. Can you tell us which element(s) we’re talking about? What is the expected behavior, and what is the result we’re seeing instead?
Haha yeah. I’m new to Webflow and this page was based on a template, so its a little messy. However, the element is each individual “client logo box” to which the interaction is applied. Note not clientS logo box (with an s) which is a larger umbrella container for these elements, but simply called “client logo box.” Again, I didn’t name these. There are four versions of this class I’m using to apply differently timed reveal animations. The reveal interaction is called “scroll reveal” and also has 4 versions of the interaction, which are used to stagger the timing of the appearance of each client logo.
The expected behavior is for the logos to each be hidden on page load, then for each client logo to fade in and up on scroll. They then scroll out of view. You can see the expected behavior if you scroll all the way down, then scroll back up, then down. That seems to be fine. To re-state the problem, the client logos are displayed initially instead of being hidden to then show on scroll.
Hi @Christopher_Cunetto, do you have any images or designs to help show what you’re looking to achieve? Would help a lot if you could provide visuals.
Also, if your site has a lot going on, it helps to create a new blank page with just the interaction you’re trying to create - reducing the issue down to just the necessary elements helps us find the problem much faster.
The page design is finished, it’s just the initial appearance of the interaction as I’ve described above that I’m looking for help with. For an example of that interaction working correctly, you can see the client logo box at the bottom of the home page. That is working correctly.
The logos at the bottom of the work page seem to be doing the same type of animation as the client list on the homepage, but I am noticing on load it’s a bit finicky. Interactions are oddly exhibiting different behaviors. When I scroll back up to the top of the work page, then back down, it works as expected. Any thoughts on this, @thewonglv?
This affects Safari (9.1) and Chrome 50.0.2661.86 (Mac).
Detailed YouTube video showing what’s going on:
The bug might be caused by all the content on the website. A HUGE amount. Would be hard to find the problem in such a large amount of interactions and everything else. Maybe try to cut down on all the interactions? There might be some interfering code that we cant even find because there is so much content.
I’m not sure why the quantity of interactions would make a difference since its properties are discreet and limited to that interaction.
Edit: Furthermore, this behavior is randomized. The appearance changes from time to time. If it was a conflict, the behavior could still be wrong, but at least it’d be wrong consistently.
. . . . . . . . . … … … …
Yes…my thoughts exactly!
Thanks for you help here guys, I appreciate the try!
I agree with your thoughts on number of interactions - also a note is that the error happens on the live site (www.cunettocreative.com) as well, and the code there only includes the interactions that are used, not all of the interactions that are in the designer, right? So there’s another funny thing.
I will start clearing out the extra crap from the designer and see if it helps, just in case.
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.