Hey, I’m pretty new to webflow and I’m working on a really really basic prototype of a website, mostly for visualization purposes since I have very low experience with coding “rules”, so it’s not even supposed to be published. Nevertheless, I’m trying to change my image into another whenever I hover the mouse on it (I just did it on the first image so far).
Watched a couple tutorials but ended up doing it by myself. The issue is that everything works perfectly on preview mode, but when I change to user-read, it stops working at all, however it starts working if, in user-read, I click the preview button to turn into developer mode then I click it again to go to preview mode.
How do I make the animation work in user-read without the user have to click in preview twice for it to work?
(click preview button twice for the image to work, its just applied to the first image so far)
No I can see the animation, I mean how did you do it? I can’t see any webflow interactions or custom css to do the animation itself. If I can see that I might be able to help you debug
Ah okay, I’d recommend not using them tbh, even if in this case it’s working for you. If you watch some tutorials on the new interactions I’m sure you’ll find them more helpful than legacy.
For this specific animation case you might want to try this
Remove the legacy interaction you’ve made, and you should have the same or similar animation (adjust the timing on the transitions to make it the same) and it’ll work everywhere, including when preview mode isn’t active
Then all you have to do is give each image that class, and the animation will work
When you’ve done all of those steps, remember to remove the hover selector from your class, there’s a bit of a weird behaviour in Webflow where the hover state stays on, so it looks like the animation isn’t working.
