This is a great video Francesco, a great alternative to GSAP with CSS, thanks for also including the cloneable. One thing I noticed on the cloneable is that on initial load all the images animate with the stagger but all at the same time, no offset, once reloaded though, it worked as expected, so I change the images from lazy load to eager load and it worked as expected on initial load.
Hey Pablo, Thank you so much for your kind words and feedback! 😊 I think that’s happening because the section being animated is the very first section on the page. Since the images in my project are lazy-loaded (and probably a bit heavy), it takes some time for them to load. As a result, they don’t initially occupy any space within the section, causing all the grid items to be in view when the page loads. Eager-loading images is definitely a great solution if the gallery to be animated is in the hero section of the page. However, if the gallery is below the fold (and therefore not visible when the page loads), there shouldn’t be any problems. 🙂 If you encounter any other issues, please let me know! Thank you once again!
This is a great video Francesco, a great alternative to GSAP with CSS, thanks for also including the cloneable. One thing I noticed on the cloneable is that on initial load all the images animate with the stagger but all at the same time, no offset, once reloaded though, it worked as expected, so I change the images from lazy load to eager load and it worked as expected on initial load.
Hey Pablo,
Thank you so much for your kind words and feedback! 😊
I think that’s happening because the section being animated is the very first section on the page. Since the images in my project are lazy-loaded (and probably a bit heavy), it takes some time for them to load. As a result, they don’t initially occupy any space within the section, causing all the grid items to be in view when the page loads.
Eager-loading images is definitely a great solution if the gallery to be animated is in the hero section of the page.
However, if the gallery is below the fold (and therefore not visible when the page loads), there shouldn’t be any problems. 🙂
If you encounter any other issues, please let me know!
Thank you once again!
Thank you! Clean solution and looks really nice.
Thank you, Olena! 😁 Really happy to hear you liked it!