Hey everyone!
I would like to add an animation to my website of the products appearing one by one.
Here is an example of what I am imagining - https://brunathelabel.com/collections/earrings.
Here is my website - https://reussirwi.com
I already managed to make an animation for the image banner, I have the AOS code added in theme liquid and managed to do the animation of the image banner by adding <data-aos=“zoom-out-up” data-aos-duration=“700”> at the end of every div class.
Unfortunately the same thing doesn’t work when I try it with the featured collection or product grid. Any suggestions would be great!
Also for some reason all image banners get affected by the code and it looks great on mobile, but when I have two images for image banner it doesn’t affect the second one. If anyone could help with that, that would also be great!
Many thanks!
Hi there! These days I have tried to find information on how to add AOS animations so that the products appear one by one. There is nothing about it on the internet but I managed to figure out how to do it:
(These steps can be applied to any file that uses “for” loops to display products. In my case, I’ll apply it to collection lists.)
1- Open the code editor and find a file called main-collection-product-grid.liquid.
2- Locate the loop:
{%- for product in collection.products -%}
3- Add your AOS animations next to the following code that will be key to establish a 200 millisecond delay between each product. You can edit this value as you like.
data-aos-delay="{{ forloop.index | minus: 1 | times: 200 }}"
4- Save the file. The code would look something like this:
5- You will see in the collections tab how the products appear one by one and with animations.
I hope it helped all those who want to add this feature in their store!
