Question:
I have a Slideshow Repeater, 3 Banners, applied animations to all three banners, but only the first banner has animation
Product:
Wix Studio
What are you trying to achieve:
Slideshow Repeater, 3 Banners, only the first banner has animation, when the slideshow transitions to the second and third banner, the animations do not show up.
Loading the repeater content directly in the editor can also contribute to the animation only playing on the first banner. Here’s why:
- Pre-loaded Content : When you add elements directly in the editor, Wix Studio pre-loads them on the page. This means all three banners are technically “on the screen” from the beginning, even if only the first one is visible.
- Entrance Animation Trigger : Since the banners are pre-loaded, the “Entrance Animation” only triggers for the first banner because it’s the only one that becomes truly visible during the transition.
Here’s how using a CMS collection for your repeater content can help:
- Dynamic Loading : When you connect your Slideshow Repeater to a CMS collection, Wix Studio only loads the content for the currently visible banner. This means the other banners are not technically “on the screen” until they become visible during the transition.
- Triggering Animations : Because the banners are dynamically loaded with each transition, the “Entrance Animation” has a chance to trigger for each banner as it becomes visible.
Therefore, using a CMS collection to populate your Slideshow Repeater can resolve the animation issue without needing code.
Here are some additional points to consider:
- Testing : Even with a CMS collection, there might be situations where the animation doesn’t trigger perfectly due to Wix Studio’s rendering behavior. Testing on different devices and browsers is recommended.
- Complex Animations : If your animations are very complex, using Velo code might still be the best option for precise control over the animation triggers.
If you decide to switch to a CMS collection, Wix provides resources to help you get started:
I hope this explanation clarifies the issue and provides alternative solutions!
Thank you very much, very fast reply, ill try it out