I am having trouble an element flickering when adding an interaction. This element is also inside of a a DIV that has a 3D transform on it. This is happening across Chrome and Safari (latest versions). Hoping someone might be able to offer some help or simply tell me not to do this haha. I tried to explain everything in detail with images. Thank you for any help. I am exhausted from trying to figure it out
So, I have Div Block 142. This Div Block has a 3D transform to it.
Inside of Div Block 142, I have two images. The first one is an image of the dashboard, or Image 30. Not much to this element as far as styling goes that would cause an issue, just a drop shadow and a radius.
Then I have second image inside of Div Block 142 (the Div with the 3D transform for itself and all of its children). This second image is named Image 45. It’s just a component of the dashboard image that I want to animate on scroll. I have a drop shadow applied to this element.
So that’s my layout. Now I jump to the interactions panel. For my scrolling interaction, I am basically telling Webflow to move Image 45 (the dashboard component) vertically as Image 30 (the dashboard image) scrolls into view.
Cool, seems pretty straightforward to me (but what do I really know haha). But when I go to play my animation or try it out on the published site, it basically disappears. Sometimes if I am lucky it will flicker.
Here is a quick screenshare of it flickering/sort of working?
Hi, I am no expert but took me ages to see the effect.
I can see why its judders as it moves in respect to where the page is.
Try a different approach,
Put the image inside another div block and make it fixed.
Just for clarity, all you are doing is keeping an image on top of another one, no effects?
Maybe just create 1 image.
I would also maybe for some effect is to create a lot more of the images, have them raised at different heights and as you scroll move them flat onto the main image.
The images are on different layers because I want to add an interaction to the smaller image. When the page scrolls, I would like the smaller image to move. I added this interaction but unfortunately the smaller image component just flickers or disappears. I am not sure why. The plan is to add a couple of these smaller image components and have them move as the page is scrolling to create a 3D layered effect.
Ok I think we are on the same page,
Try the div block suggestion I made as I tried it on your link before I previously replied.
If you don’t have much luck or confused let me know I can have a bash on my play project.
Thanks again for helping me with this. Can you explain the fixed div idea a little more?
If I create a new fixed div and put image 45 into it, then it would stay in place as I scrolled, right? I want to have image 45 move a bit while I am scrolling. Similar to how the “face bubbles” move as you scroll on this page:
I am very well-versed in Webflow, but I am not understanding haha. Can you please explain a bit more?
cool, i love webflow as well.
Was going to copy the section onto my play project to show you but it wont let me.
Been helping a lot today and cant quite remember what I was talking about.
However here is what I found which will help you a lot.
Make
D142 static
I45 absolute Left and top =auto, right 0%, bot 1%
I30 static.
Next put transition onto D142
Here is the interesting bit (well it was for me)
Activity happens between 30% and 75%
Drag you initial move for I45 to 30% and your final to 75%
You may also want to remove smoothing or play with it.
You need to also move the 100% to 75%
Problem is the image is high up on the page and you don’t have a lot of time to scroll.
The image is also hard to actually see white on white.
I will have a go on my play project (just means it non production for learning).
I am sure we will get something working between us you like.
I think smoothing is making it judder, try 0%, we are trying to pin this to a page.
They could both have smoothing but that would probably make you feel a bit queasy.
I got it. or I think I does.
I think we were both caught up with relative and absolute.
Remove all that.
Remove the div block for now.
Put the two images underneath (not inside) link block 4
Trigger is going to be the SECTION Home Wrap nothing else, Ahh its a div (should be a section but doesn’t matter I think).
Put a padding under link block 4 say 150
So you should now see big i30 with i45 underneath.
We are going to animate both images.
i45 Interactions start at 24% ends at 55%
Position i45 where you want it to start
I did
x=464 y=15
scale 1.2
On 55% line I did
x=464 y= -248
Still judders, wait what do I see, you have a on page scroll of same animation.
Remove that and it works fine.
