I want to create an animation that plays based on hover location. As an example, it shows a clock at 10 o'clock. When I hover over the 9, it must play a video of the clock going from 10 to 9, and then show the static image of the clock at 9. I have made the animation using different slides, but that means that videos need to load in per slide. Can it be done in one slide?
This is needed for a bigger project with a robot's arms, but I need a proof of concept.
The animation of the clock with different slides is added as an attachment.
Unfortunately, this type of hover-based directional animation cannot be done within a single slide in LayerSlider at the moment. However, you can absolutely achieve it by using multiple slides together with static layers on the first slide.
The idea is to place static layers on Slide 1 that act as the hover triggers. These layers can detect the hover areas (e.g., where “9 o’clock” would be) and then navigate to the appropriate slide that shows the animation. This way, everything feels connected, but you avoid needing a single slide with multiple video states.
Thanks for your reply. I have made a test with your proposed solution at https://staging.teunvanhoof.com/. It mostly works, but after switching slides a couple of times, the clock starts flashing a different state before playing the transitional video, which you can see after hovering over the 9, 10 and 11 a couple of times. Can this be fixed?
I see the issue — after a few slide changes the previous video state briefly flashes before the new video plays. This is currently a limitation of the multi-slide workaround, and it’s probably not the best long-term solution for what you’re trying to achieve.
Instead, I would recommend animating a “real” clock directly within a single slide using layers (hands, rotation, etc.), which avoids video preloading and slide-switching entirely. Please check the attached demo for an example of how this approach could work.
(Please make sure that you are using the latest version of LayerSlider: 8.1.1)
I want to create an animation that plays based on hover location. As an example, it shows a clock at 10 o'clock. When I hover over the 9, it must play a video of the clock going from 10 to 9, and then show the static image of the clock at 9. I have made the animation using different slides, but that means that videos need to load in per slide. Can it be done in one slide?
This is needed for a bigger project with a robot's arms, but I need a proof of concept.
The animation of the clock with different slides is added as an attachment.
Attached files: LayerSlider - Bigfoot-kloktest - 2025-12-03 at 15.52.58.zip
Hi Teun,
Unfortunately, this type of hover-based directional animation cannot be done within a single slide in LayerSlider at the moment. However, you can absolutely achieve it by using multiple slides together with static layers on the first slide.
The idea is to place static layers on Slide 1 that act as the hover triggers. These layers can detect the hover areas (e.g., where “9 o’clock” would be) and then navigate to the appropriate slide that shows the animation. This way, everything feels connected, but you avoid needing a single slide with multiple video states.
Best Regards,
George | Kreatura Dev Team
Thanks for your reply. I have made a test with your proposed solution at https://staging.teunvanhoof.com/. It mostly works, but after switching slides a couple of times, the clock starts flashing a different state before playing the transitional video, which you can see after hovering over the 9, 10 and 11 a couple of times. Can this be fixed?
Hi Teun,
I see the issue — after a few slide changes the previous video state briefly flashes before the new video plays. This is currently a limitation of the multi-slide workaround, and it’s probably not the best long-term solution for what you’re trying to achieve.
Instead, I would recommend animating a “real” clock directly within a single slide using layers (hands, rotation, etc.), which avoids video preloading and slide-switching entirely. Please check the attached demo for an example of how this approach could work.
(Please make sure that you are using the latest version of LayerSlider: 8.1.1)
Attached files: LayerSlider - Bigfoot-kloktest - 2025-12-05 at 08.06.16.zip
Best Regards,
George | Kreatura Dev Team