I need some help with my hover interaction on page “Voorbeelden”. I have an image in the div “voorbeeld-img”, this div has an over-flow hidden and an static height in px.
The img “voorbeeld-img_img” contains an image with an example of a template. The height of this image is variable. Some images are longer than others.
When I hover over “voorbeeld-img” I want the image to move up, to show the rest of the image. I want the image to stop scrolling when the bottom of the image is reached. This interaction is set on the div “voorbeeld-img”. The hover over is called “HoverOverVoorbeeldImg”, the hover out is called “HoverOutVoorbeeldImg”.
Because some of the images are longer than others, it takes longer to reach the bottom of the image… However, this also effects the scrolling speed… Any tips on how to make each image scroll at the same speed?
Summary: Question 1: How to move bottom of image in div when hover over? Question 2: How to get the same “scrolling” speed with different image heights?
Here is my site Read-Only: LINK
Preview website: LINK
Regarding the speed of the scroll, I see you are doing that with a 3 second ease in which the class “voorbeeld-img_img” moves up the y-axis a certain percent.
Your issue is, if I understand correctly, that this point on where to stop scrolling (the percentage) is not the same for each image given their different heights. This gives you two issues:
A fixed percentage will work for one image to stop at the exact position, but will under- or overshoot the next image
A fixed percentage of climb in combination with a 3 second time will result in some images climbing faster or slower than others.
Ideal would be to set a climb (y-axis move) based on image height. This can be done with some custom code but it is not yet an available variabele in webflow as far as I can tell.
What I suggest you try as a way of getting this working today is:
first choose a unique classname for each image so you can treat them all 3 separately.
For each panel, setup the interaction customized to it’s image. With each it’s own amount to climb in it’s own time. Maybe a bit shorter of time for smaller images.
Do keep in mind that for these absolute y-values to work properly, you need a fixed height for the 3 panels. If the panels can strech or shrink vertically, your animation points will be off and you will get undesired results. Also, this might be pretty hard to make responsive if that’s part of your target devices.
If it’s just these 3 panels you can get away with that. If you are going to add lots of template previews this way, rows and rows of them, I would rethink how you would do it because it would become way too manual to set it up.
Maybe a lottie animation of a demo scroll can be made for each template, and you just play the lottie animation from 0 to 100% in 3 secs. That way you avoid having to play with the height at wich to stop the move altogether. Since the stopping point is already baked into the lottie file.
Edit: You have you nul-zes on your public page. If that’s your real number, maybe change it to a bogus one while it is up for demo. Those robocall scrapers are insanely busy looking for live numbers all over the web.
@Ozone Thanks for your fast reply. I have about 10 templates which I want to be able to show… So custom interactions seems to be like a lot of work…
I also thought about making a video of it and then let it play on hover. This video should also only be available on Desktop. So I don’t think I have to worry about bandweight in that case, since on mobile it shall be just a screenshot of the first two folds of the webpage.
What I liked about this that you as a visitor could choose when to stop the scrolling and continue to do what you want to do next.
I too really like the idea! It’s up to you if you want to go with 10 custom interactions. In good development, you want to automate it as much as possible off course. So 1 interaction for all
I agree that lottie for all might be as much (ifnot more) work. I personally think that the interaction is cool BUT hear me out from a UX perspective.
So on mobile you are showing larger image either way - done.
On desktop - people will want to see the large image of a template before they even consider buying it anyway. So from a UX perspective, is it not more to-the-point if you pop them out to large view on hover immediately?
The 3 billboards you have now show the top of each template. If I love that part, I wanna click on it immediately to view the whole thing - cause I love it - right?
If I hate the top part already, I probably am not going to engage with it either way.
So the UX funnel is dual: Like preview > show me full OR hate preview > look away to next best.
If that funnel/reasoning is true, why focus on scrolling preview expansion in it’s small container when what you really want, is to show it in it’s full glory (not leaving the entire catalogue yet though)
@Ozone You do have a great point there… Maybe I’m just wasting time with making it look fancy. You are right, that if people like it they will click on it to preview the live template.
I will do the popout on hover I think. Will come back to you for some feedback when I’m ready with it.
